Tooltip

Tooltips are used to provide additional information about an element when the user hovers over it. They are commonly used in forms, buttons, and other interactive elements.

Usage

Loading Code Block...

Full example

Hover me

Tooltip Title

Tooltip Description

Loading Code Block...

Position

Adjust the `position` prop to determine where the tooltip appears relative to the trigger. Use the interactive drop-down below to test `top`, `bottom`, `left`, and `right` positions — the snippet updates to match.

top

Hover me

Tooltip Title

Tooltip Description

Loading Code Block...

Alignment

Adjust the `alignment` prop to change where the tooltip’s arrow connects with the trigger element. Use the interactive drop-down below to test `start`, `center`, and `end` alignments — the snippet updates to match.

start

Hover me

Tooltip Title

Tooltip Description

Loading Code Block...

---

Props

Props	Default	Type	Description
trigger*	—	ReactNode (React only)	Required in React: the element the user hovers/focuses to reveal the tooltip. In Vue this prop does not exist — pass the trigger element via the component's default slot instead (see Full example).
header	undefined	React: string | ReactNode · Vue: string	Bold heading shown at the top of the tooltip panel. Optional in both frameworks. React accepts arbitrary nodes (JSX, fragments, icons); Vue interpolates with `{{ }}` and only supports plain strings.
subtext	undefined	React: string | ReactNode · Vue: string	Secondary descriptive text rendered below the header. React accepts arbitrary nodes; Vue accepts strings only.
position	'top'	'top' | 'right' | 'bottom' | 'left'	Side of the trigger the panel and arrow are anchored to.
alignment	'start'	'start' | 'center' | 'end'	How the panel is aligned along the trigger axis when `position` is `top` or `bottom`. Ignored on horizontal positions, which always center vertically.
showArrow	true	boolean	Whether to render the small triangular arrow that points at the trigger.
bgColor	'bg-black'	string	Background of the tooltip panel and arrow. Accepts hex (`#000000`), Tailwind background utilities (`bg-blue-500`) or theme tokens (`theme-bg-accent`).
headerColor	'text-white'	string	Color of the header text. Accepts hex (`#ffffff`), Tailwind foreground utilities (`text-blue-500`) or theme tokens (`theme-text-accent`).
subtextColor	'text-white'	string	Color of the subtext. Accepts the same value formats as `headerColor`.

Panel sizing

The tooltip panel sizes to its content with a responsive cap: w-max max-w-[18rem] md:max-w-sm. Short labels collapse to their content width; long content wraps and is capped at the breakpoint-driven max.

Accessibility

• The trigger wrapper is linked to the tooltip panel via aria-describedby, so screen readers announce the tooltip content alongside the trigger.
• The panel itself has role="tooltip".
• Visibility is driven purely by CSS (group-hover and group-focus-within), so the tooltip surfaces both on mouse hover and on keyboard focus of any focusable element inside the trigger.
• The component does not currently dismiss on Esc; if your trigger contains a focusable control, blurring it (e.g. Tab away or Shift+Tab) will hide the tooltip.

Best practices

Use for supplementary data only

Tooltips are for brief, supplemental information (e.g., explaining an ambiguous icon or showing a truncated file name). Do not place critical required workflows, interactive inputs, or rich links solely within a tooltip.

Short text limits

Keep tooltip text precise and concise, preferably under 3 lines. If you have paragraphs of contextual data, consider using a Modal or Drawer.

Hover discovery limit

Crucial instructions (like a password requirement warning on a form field) should almost always be directly visible on the page (e.g. helperText on an Input) rather than hidden inside a tooltip that requires the user to explore and discover it.