Tooltip

Installation

Install the Tooltip component using the nocta-ui CLI:

npx nocta-ui add tooltip

Then import the components you need:

import {
  Tooltip,
  TooltipTrigger,
  TooltipContent,
} from '@/components/ui/tooltip';

Basic Usage

Simple Tooltip

With Text Trigger

Positioning

The Tooltip component supports different positioning sides: top, bottom, left, and right. The default position is top.

Alignment

Control the alignment of the tooltip relative to the trigger element using the align prop.

Rich Content

Tooltips can contain rich content including multiple lines and formatted text.

Delay Duration

Control how long the user must hover before the tooltip appears using the delayDuration prop.

Customization

Custom Styling

The Tooltip components accept a className prop for custom styling:

<TooltipContent className="bg-blue-900 text-blue-100 border-blue-700">
  Custom styled tooltip
</TooltipContent>

Without Arrow

Controlled Tooltip

For programmatic control, you can use the open and onOpenChange props:

const [open, setOpen] = useState(false);

return (
  <Tooltip open={open} onOpenChange={setOpen}>
    <TooltipTrigger asChild>
      <Button onClick={() => setOpen(!open)}>
        Toggle Tooltip
      </Button>
    </TooltipTrigger>
    <TooltipContent>
      This tooltip is controlled by React state.
    </TooltipContent>
  </Tooltip>
);

Accessibility Features

The Tooltip component includes comprehensive accessibility features:

• ARIA attributes: Proper role="tooltip" and aria-describedby attributes
• Keyboard navigation:
  • Focus shows the tooltip
  • Blur hides the tooltip
  • Escape key support
• Screen reader support: Tooltip content is properly announced
• Focus management: Works with keyboard navigation
• Hover interaction: Mouse enter/leave events

API Reference

Tooltip

The root component that manages tooltip state.

TooltipTrigger

Element that triggers the tooltip on hover/focus.

TooltipContent

The tooltip content that appears on hover/focus.