Tooltip
Contextual information displayed on hover, focus, or click. Perfect for providing hints, labels for icon-only buttons, or additional context. Supports multiple placements, color variants, and trigger modes.
Tooltip Placements
I appear on top
I appear on the right
I appear on the bottom
I appear on the left
Extended Placements
In addition to basic placements, tooltips support start and end alignments for precise positioning.
I appear on top
I appear on the right
I appear below
I appear on the left
Color Variants
Use the variant prop to change the tooltip color for semantic meaning.
Default dark tooltip
Rich tooltip with light background
<Tooltip content="Default dark tooltip" variant="default">
<Button>Default</Button>
</Tooltip>
<Tooltip content="Rich light tooltip" variant="rich">
<Button>Rich</Button>
</Tooltip>Trigger Modes
Tooltips can be triggered by hover (default), click, or focus events.
Appears on hover
Click again to close
Tab to this button
Click tooltips close when clicking outside or pressing Escape.
// Hover trigger (default)
<Tooltip content="Help text" trigger="hover">
<Button>Hover me</Button>
</Tooltip>
// Click trigger
<Tooltip content="Click again to close" trigger="click">
<Button>Click me</Button>
</Tooltip>
// Focus trigger
<Tooltip content="Tab to focus" trigger="focus">
<Button>Focus me</Button>
</Tooltip>Controlled Mode
Use open and onOpenChange props for fully controlled tooltips.
Click to show tooltip
<Tooltip
content="Click to show tooltip"
trigger="click"
>
<Button>Click Me</Button>
</Tooltip>Icon Button Labels
Save your changes
Edit this item
Delete permanently
Hover over the icon buttons to see tooltips. Always use
aria-label on icon-only buttons.<Tooltip content="Save your changes">
<Button variant="primary" iconOnly leftIcon={<Icon name="check" size="sm" />} aria-label="Save" />
</Tooltip>
<Tooltip content="Delete permanently" variant="default">
<Button variant="ghost" iconOnly leftIcon={<TrashIcon />} aria-label="Delete" />
</Tooltip>Rich Content
The content prop accepts any ReactNode, allowing for rich formatted content.
Keyboard Shortcut
Press Ctrl + S to save
Warning
This action cannot be undone
<Tooltip
content={
<div style={{ textAlign: 'center' }}>
<div style={{ fontWeight: 600 }}>Keyboard Shortcut</div>
<div>Press <kbd>Ctrl + S</kbd> to save</div>
</div>
}
>
<Button variant="primary">Save</Button>
</Tooltip>Arrow Control
Use the arrow prop to hide the tooltip arrow pointer.
Default tooltip
Rich tooltip style
Delay Configuration
Control how quickly tooltips appear and disappear with delay and hideDelay.
Default delay (200ms)
No delay
Slow to appear
Longer delay
// Instant appearance
<Tooltip content="Help text" delay={0}>
<Button>Hover me</Button>
</Tooltip>
// Slow tooltip
<Tooltip content="Help text" delay={500}>
<Button>Hover me</Button>
</Tooltip>Accessibility
- Tooltips appear on focus as well as hover for keyboard accessibility
- Uses
role="tooltip"for screen readers - Press Escape to close open tooltips
- For icon-only buttons, always include
aria-labelon the button - Tooltip content should be supplementary, not essential information