Tooltip

Tooltip Component: Unveil Hidden Insights with a Hover

The Tooltip Component is a designed to enhance user experience by providing contextual information or hints when users hover over, focus on, or tap an element. It's an invaluable asset for creating intuitive interfaces, offering additional details without cluttering the UI. Perfect for both desktop and mobile applications, tooltips help in guiding users through your application with ease and precision.

Anatomy

The anatomy of the Tooltip Component is meticulously crafted to ensure a seamless integration with any UI element. It consists of a lightweight description, container and tip that dynamically positions itself around the target element based on the specified orientation. Inside, the content is neatly displayed, offering clarity and focus. The component's design is flexible, allowing it to adapt to various sizes and orientations to fit the content and context perfectly.

anatomy of tooltip component

Properties

The Tooltip Component comes packed with customizable properties to ensure it fits your specific needs. Key properties include size, allowing for small, medium, or large tooltips; and orientation, which determines the tooltip's positioning relative to the target element. These properties provide the flexibility needed to create a tooltip that aligns perfectly with your design and usability requirements.

Size	Orientation
Small	Left
Medium	Right
Large	Top
	Bottom

Size

• Small: A compact option best suited for short, succinct pieces of text or icons. This size ensures that the tooltip is unobtrusive yet readable.

• Medium: This is the standard size, offering a balanced option that is large enough to hold a moderate amount of text while maintaining a neat appearance.

• Large: Designed for tooltips that need to convey more detailed information or longer text. The large size provides ample space, ensuring content is easy to read without crowding.

React

import React from 'react';
import { PlusTooltip, PlusButton } from '@plusui/react';

// Small Tooltip
const SmallTooltip = () => (
  <PlusTooltip size="sm" message="This is a small tooltip" placement="top">
    <PlusButton>Hover over me (small)</PlusButton>
  </PlusTooltip>
);

// Medium Tooltip
const MediumTooltip = () => (
  <PlusTooltip size="md" message="This is a medium tooltip" placement="top">
    <PlusButton>Hover over me (medium)</PlusButton>
  </PlusTooltip>
);

// Large Tooltip
const LargeTooltip = () => (
  <PlusTooltip size="lg" message="This is a large tooltip" placement="top">
    <PlusButton>Hover over me (large)</PlusButton>
  </PlusTooltip>
);

export default {
  SmallTooltip,
  MediumTooltip,
  LargeTooltip,
};

Angular

<!-- Small Tooltip -->
<plus-tooltip
  size="sm"
  message="This is a small tooltip"
  placement="top"
>
  <plus-button>Hover over me (small)</plus-button>
</plus-tooltip>  <!-- Small size -->

<!-- Medium Tooltip -->
<plus-tooltip
  size="md"
  message="This is a medium tooltip"
  placement="top"
>
  <plus-button>Hover over me (medium)</plus-button>
</plus-tooltip>  <!-- Medium size -->

<!-- Large Tooltip -->
<plus-tooltip
  size="lg"
  message="This is a large tooltip"
  placement="top"
>
  <plus-button>Hover over me (large)</plus-button>
</plus-tooltip>  <!-- Large size -->

Vue

<template>
  <!-- Small Tooltip -->
  <plus-tooltip
    size="sm"
    message="This is a small tooltip"
    placement="top"
  >
    <plus-button>Hover over me (small)</plus-button>
  </plus-tooltip>  <!-- Small size -->

  <!-- Medium Tooltip -->
  <plus-tooltip
    size="md"
    message="This is a medium tooltip"
    placement="top"
  >
    <plus-button>Hover over me (medium)</plus-button>
  </plus-tooltip>  <!-- Medium size -->

  <!-- Large Tooltip -->
  <plus-tooltip
    size="lg"
    message="This is a large tooltip"
    placement="top"
  >
    <plus-button>Hover over me (large)</plus-button>
  </plus-tooltip>  <!-- Large size -->
</template>

Javascript

<!-- Small Tooltip -->
<plus-tooltip
  size="sm"
  message="This is a small tooltip"
  placement="top"
>
  <plus-button>Hover over me (small)</plus-button>
</plus-tooltip>  <!-- Small size -->

<!-- Medium Tooltip -->
<plus-tooltip
  size="md"
  message="This is a medium tooltip"
  placement="top"
>
  <plus-button>Hover over me (medium)</plus-button>
</plus-tooltip>  <!-- Medium size -->

<!-- Large Tooltip -->
<plus-tooltip
  size="lg"
  message="This is a large tooltip"
  placement="top"
>
  <plus-button>Hover over me (large)</plus-button>
</plus-tooltip>  <!-- Large size -->

Orientation

• Left: Display the tooltip to the left of the target, with variations in vertical alignment. Perfect for right-aligned elements or when horizontal space is limited on the right.

• Right: Position the tooltip to the right of the target, with options for vertical alignment. Best suited for left-aligned elements or when additional context is needed without obstructing content to the left.

• Top: Position the tooltip above the target element, with the ability to align it to the middle, right, or left, respectively. Ideal for elements located towards the bottom of the viewport or when vertical space is plentiful.

• Bottom: Position the tooltip below the target element, with alignment options similar to the above, suited for elements at the top of the viewport or when you wish to draw attention downwards.

React

import React from 'react';
import { PlusTooltip, PlusButton } from '@plusui/react';

// Tooltip with "Top" Placement
const TooltipTopPlacement = () => (
  <PlusTooltip placement="top" message="This tooltip is placed at the top">
    <PlusButton>Hover over me (top)</PlusButton>
  </PlusTooltip>
);

// Tooltip with "Bottom" Placement
const TooltipBottomPlacement = () => (
  <PlusTooltip placement="bottom" message="This tooltip is placed at the bottom">
    <PlusButton>Hover over me (bottom)</PlusButton>
  </PlusTooltip>
);

export default {
  TooltipTopPlacement,
  TooltipBottomPlacement,
};

Angular

<!-- Tooltip with "Top" Placement -->
<plus-tooltip
  placement="top"
  message="This tooltip is placed at the top"
>
  <plus-button>Hover over me (top)</plus-button>
</plus-tooltip>

<!-- Tooltip with "Bottom" Placement -->
<plus-tooltip
  placement="bottom"
  message="This tooltip is placed at the bottom"
>
  <plus-button>Hover over me (bottom)</plus-button>
</plus-tooltip>

Vue

<template>
  <!-- Tooltip with "Top" Placement -->
  <plus-tooltip
    placement="top"
    message="This tooltip is placed at the top"
  >
    <plus-button>Hover over me (top)</plus-button>
  </plus-tooltip>

  <!-- Tooltip with "Bottom" Placement -->
  <plus-tooltip
    placement="bottom"
    message="This tooltip is placed at the bottom"
  >
    <plus-button>Hover over me (bottom)</plus-button>
  </plus-tooltip>
</template>

Javascript

<!-- Tooltip with "Top" Placement -->
<plus-tooltip
  placement="top"
  message="This tooltip is placed at the top"
>
  <plus-button>Hover over me (top)</plus-button>
</plus-tooltip>

<!-- Tooltip with "Bottom" Placement -->
<plus-tooltip
  placement="bottom"
  message="This tooltip is placed at the bottom"
>
  <plus-button>Hover over me (bottom)</plus-button>
</plus-tooltip>

Layout & Spacing

Adequate padding around the text prevents crowding, while the tooltip's offset from the target element is carefully calculated to avoid overlap, ensuring that both the tooltip and the element remain distinctly visible and unobstructed.

layout & spacing of tooltip component

Light & Dark Mode

The Tooltip Component is fully equipped to seamlessly transition between light and dark modes, ensuring consistency and readability across different themes. Whether your application prefers a light, airy feel or a dark, sophisticated look, the tooltip adapts its color scheme accordingly, providing an optimal viewing experience in any lighting condition.

tool tip light & dark mode

Accessibility

Accessibility is a cornerstone of the Tooltip Component's design, ensuring that all users, including those with disabilities, can fully benefit from the information it provides. It supports keyboard navigation and is ARIA-compliant, making sure that screen readers can accurately convey the tooltip's content. This commitment to accessibility helps in creating a more inclusive and user-friendly application environment.

Criteria	Description	Status
ARIA Attributes	Ensures ARIA attributes are allowed for an element's role	Passed
ARIA Role	Ensures role attribute has an appropriate value for the element	Passed
ARIA Hidden Elements	Ensures aria-hidden elements are not focusable nor contain focusable elements	Passed
Color Contrast	Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds.	AA ~ AAA

Design System

Plus UI Design System | Figma CommunityFigma

Plus UI Design System on Figma

API

Property	Description	Type	Accepted Values	Default
size	Sets the size of the tooltip	String	sm, md, lg	md
placement	Determines the tooltip's position relative to the element	String	top, bottom, left, right, top-start, top-end, bottom-start, bottom-end, left-start, left-end, right-start, right-end	top
showArrow	If true, shows an arrow pointing toward the element	Boolean	true, false	true
message	The message displayed inside the tooltip	String	Any valid text	null
trigger	Specifies what triggers the tooltip	String	hover, focus, click, manual	hover focus