Tooltip

v0.5.11

Ready for Production

Catalyst Tooltip extends Radix UI's Tooltip primitive with built-in design tokens, entrance animations, and accessible defaults — giving you a production-ready tooltip with zero configuration.

Installation

npm install @pmi/catalyst-tooltip

import {
  TooltipRoot,
  TooltipTrigger,
  TooltipContent,
  TooltipProvider,
  TooltipPortal,
  TooltipArrow,
} from '@pmi/catalyst-tooltip';

Add the preset to your tailwind.config.ts:

import tailwindTooltipPreset from '@pmi/catalyst-tooltip/tailwind.config';

export default {
  presets: [tailwindTooltipPreset],
  // ...
};

Common Patterns

Arrow Positioning

Control tooltip placement using the side and align props on TooltipContent.

With Portal

Render tooltip content outside the DOM hierarchy to avoid clipping. When the Tooltip uses the Portal subcomponent, it is necessary to add the theme styling class to the TooltipContent, so that this container respects the desired design.

With Icon Trigger (precomposed)

Use icons as tooltip triggers for compact UI elements. Always provide aria-label on icon-only triggers.

Complex Content

Tooltips can contain rich content including lists and formatted text.

API Reference

Tooltip is a compound component built on Radix UI primitives. The sections below summarize the shared API surface for each part of the component.

TooltipProvider

Wraps tooltip components to provide shared delay and hover configuration.

Accepts all standard Radix Tooltip Provider props.

TooltipRoot

The root component that manages tooltip open/close state.

Accepts all standard Radix Tooltip Root props.

TooltipTrigger

The element that triggers the tooltip on hover or focus.

Accepts all standard Radix Tooltip Trigger props and forwards ref to the underlying element.

TooltipPortal

Renders the tooltip content in a portal outside the DOM hierarchy.

Accepts all standard Radix Tooltip Portal props.

TooltipContent

The tooltip content that appears when the trigger is hovered or focused.

Accepts all standard Radix Tooltip Content props and forwards ref to the underlying element.

TooltipArrow

An optional arrow element that points to the trigger.

Accepts all standard Radix Tooltip Arrow props and forwards ref to the underlying element.

Accessibility

Tooltip is designed to meet WCAG 2.2 AA standards. The sections below document keyboard behavior and ARIA semantics.

Keyboard Interactions

ARIA

• Radix automatically applies aria-describedby on the trigger, referencing the tooltip content.
• Tooltip content is announced by screen readers when the trigger receives focus.
• Icon-only triggers must include an aria-label so the trigger has an accessible name independent of the tooltip.

See the Radix Tooltip accessibility docs for inherited baseline behavior.

Choosing the Right Component

Use Tooltip when you need to display brief, supplementary information on hover or focus. Reach for a different primitive when:

Related

• Popover
• DropdownMenu
• Dialog
• AlertDialog