Tooltip
A lightweight tooltip component for displaying contextual information on hover, click, or focus. Supports 4 positions, configurable delay, optional arrow, and smooth Framer Motion animations.
Live Preview
Interact with the tooltip component in real time. Adjust position, trigger, arrow, and delay to see changes instantly.
<Tooltip
content="Hello from tooltip!"
position="top"
trigger="hover"
>
<AidashButton>Hover Me</AidashButton>
</Tooltip>Installation
Install the Aidash Components package using your preferred package manager.
$ pnpm add @aidash/componentsImport
Import the Tooltip component into your file.
import { Tooltip } from '@/components/aidash/tooltip';Usage
The simplest way to use Tooltip with default props.
<Tooltip content="Save your changes">
<AidashButton>Save</AidashButton>
</Tooltip>
<Tooltip content="Delete this item" position="bottom">
<AidashButton variant="outline">Delete</AidashButton>
</Tooltip>Position
Four positioning options to place the tooltip relative to the trigger element.
1<Tooltip content="Top tooltip" position="top">2<AidashButton variant="outline" size="sm">Top</AidashButton>3</Tooltip>4 5<Tooltip content="Right tooltip" position="right">6<AidashButton variant="outline" size="sm">Right</AidashButton>7</Tooltip>8 9<Tooltip content="Bottom tooltip" position="bottom">10<AidashButton variant="outline" size="sm">Bottom</AidashButton>11</Tooltip>12 13<Tooltip content="Left tooltip" position="left">14<AidashButton variant="outline" size="sm">Left</AidashButton>15</Tooltip>Trigger
Choose between hover and click activation modes.
Hover Trigger (default)
Click Trigger
1{/* Hover trigger (default) */}2<Tooltip content="Appears on hover" trigger="hover">3<AidashButton>Hover Me</AidashButton>4</Tooltip>5 6{/* Click trigger */}7<Tooltip content="Appears on click" trigger="click">8<AidashButton>Click Me</AidashButton>9</Tooltip>Arrow
Toggle the arrow indicator that points from the tooltip to the trigger.
With Arrow
Without Arrow
1{/* With arrow (default) */}2<Tooltip content="Has arrow" arrow={true}>3<AidashButton>With Arrow</AidashButton>4</Tooltip>5 6{/* Without arrow */}7<Tooltip content="No arrow" arrow={false}>8<AidashButton>No Arrow</AidashButton>9</Tooltip>Custom Content
Tooltip content accepts ReactNode, enabling rich formatting and custom layouts.
1{/* Rich content with title and description */}2<Tooltip3content={4 <div className="space-y-1">5 <div className="font-semibold text-sm">User Profile</div>6 <div className="text-white/70">View and edit your account settings</div>7 </div>8}9position="bottom"10>11<AidashButton>Rich Tooltip</AidashButton>12</Tooltip>13 14{/* With inline icon */}15<Tooltip16content={17 <div className="flex items-center gap-2">18 <CheckIcon className="w-3.5 h-3.5 text-green-400" />19 <span>Status: Online</span>20 </div>21}22>23<AidashButton>With Icon</AidashButton>24</Tooltip>25 26{/* Keyboard shortcut hint */}27<Tooltip28content={29 <div>30 <span className="text-yellow-400">Shortcut:</span> Ctrl + S31 </div>32}33>34<AidashButton>Keyboard Hint</AidashButton>35</Tooltip>Accessibility
Built-in accessibility features for keyboard navigation and screen readers.
Keyboard Navigation
Tooltip triggers respond to focus and blur events, so tooltips appear when navigating with Tab key in hover mode.
ARIA Attributes
The arrow element uses aria-hidden to prevent screen readers from announcing decorative content. The tooltip container uses pointer-events-none to avoid interfering with interaction.
Screen Reader Support
Since tooltip content may not be accessible to screen readers by default, ensure critical information is also available through aria-label or visible text on the trigger element.
Click Outside to Dismiss
When using trigger="click", clicking anywhere outside the tooltip automatically dismisses it, following standard UI expectations.
1{/* Tooltip with keyboard support (hover mode) */}2<Tooltip content="Save your work">3<AidashButton aria-label="Save">Save</AidashButton>4</Tooltip>5 6{/* Click-triggered tooltip with outside click dismiss */}7<Tooltip content="More info here" trigger="click">8<AidashButton aria-label="Info">?</AidashButton>9</Tooltip>API Reference
Complete list of props accepted by Tooltip.
| Prop | Type | Default | Description |
|---|---|---|---|
| content | ReactNode | — | Tooltip content to display |
| children | ReactElement | — | The trigger element that the tooltip wraps |
| position | 'top' | 'right' | 'bottom' | 'left' | 'top' | Position of the tooltip relative to the trigger |
| trigger | 'hover' | 'click' | 'hover' | How the tooltip is activated |
| delay | number | 200 | Milliseconds before the tooltip appears |
| arrow | boolean | true | Whether to show an arrow pointing to the trigger |
| className | string | '' | Additional CSS classes for the tooltip content |
content prop accepts any ReactNode, so you can pass strings, JSX elements, or complex layouts. The children prop must be a single ReactElement that serves as the trigger.Related
Other components that work well alongside Tooltip.