Overlaysstable
Tooltip
A lightweight contextual label that appears on hover or focus, with elegant animated variants.
Installation
Install the component directly into your project using the Pittaya CLI.
npx pittaya@latest add tooltip
When to use
Use tooltips to provide short, contextual hints for icons, buttons, and controls. Keep content concise and avoid critical information that users must read to proceed.
Prefer tooltips for microcopy and clarify ambiguous actions. For richer content or interactive elements, use Popover or Dialog.
Best practices
- Keep it snappy: Under 60 characters is your sweet spot—short enough to read in a blink, long enough to actually say something useful.
- Play nice with keyboard users: Trigger on both hover and focus to ensure everyone, not just mouse users, can enjoy your wisdom.
- Don't be a nuisance: Position your tooltip so it doesn't cover the very thing the user is trying to interact with. That defeats the purpose.
- Stay consistent: Pick a side (top or bottom usually works) and stick with it. Predictable UI is delightful UI.
- Animation matters: Choose a variant that matches your vibe—smooth and responsive, a playful swing, or a dramatic 3D flip. Let your brand shine.
Accessibility
Built on Radix UI primitives, tooltips manage focus and ARIA attributes automatically. Always ensure the trigger is focusable and the tooltip content is supplemental, not essential.
Examples
Combine variants and sizes to meet your needs.
Basic tooltip
A simple tooltip triggered by a button.
Animated variant
Elegant motion that responds to pointer position.
Swing variant
Single swing on open, then settles.
Flip 3D variant
A 3D flip entry with perspective.
Positioning
Control placement using the side prop.
Creative accent
A stylish tooltip with accent lines and emoji.
Properties
TSX interface that combines variants and default attributes.
| Prop | Type | Default | Description |
|---|---|---|---|
side | 'top' | 'right' | 'bottom' | 'left' | 'top' | Preferred side for positioning relative to the trigger. |
sideOffset | number | 0 | Distance in pixels from the trigger element. |
delayDuration | number | 0 | Delay in ms before showing the tooltip (Provider). |