Tooltip

Contextual information on hover

DisplayStable

Preview

Interactive preview of the Tooltip component with different variants.

Installation

Install the package via npm:

bash
npm install apex-design-system

Import

tsx
import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from 'apex-design-system';

Basic Usage

tsx
<TooltipProvider>
  <Tooltip>
    <TooltipTrigger>Hover me</TooltipTrigger>
    <TooltipContent>
      <p>Tooltip content</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

Accessibility

This component follows WAI-ARIA best practices and is WCAG 2.1 AA compliant. It includes proper keyboard navigation, focus management, and screen reader support.

View in StorybookView source