A non-interactive floating label that appears on hover or focus to provide supplementary context.
Preview
Code
VUE
<Tooltip />Props
Text content of the tooltip
Placement of the tooltip relative to the trigger
Label for the demo trigger button
Delay before tooltip appears (ms)
Props API
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
content | string | "This is a helpful tooltip" | — | Text content of the tooltip |
position | select"top" | "bottom" | "left" | "right" | "top" | — | Placement of the tooltip relative to the trigger |
triggerLabel | string | "Hover over me" | — | Label for the demo trigger button |
delay | select"0" | "200" | "500" | "200" | — | Delay before tooltip appears (ms) |
Usage
Keep tooltip content short (under 80 characters). Never place interactive elements — links, buttons — inside a tooltip. Tooltips should supplement visible UI, never replace it.
Accessibility
Uses role="tooltip" and aria-describedby to associate tooltip content with its trigger.
Tooltip content is never the sole way to convey critical information.
Tooltips appear on keyboard focus as well as pointer hover.