Tooltip
A simple text prompt bubble triggered on hover or keyboard focus.
Basic usage
Trigger on hover
Placement
Four directions
When space is insufficient, the tooltip automatically flips along the main axis and avoids the viewport edges.
Focus trigger
Trigger on keyboard focus
Controlled display
The open attribute is controlled: an external button can set/remove open to show/hide the tooltip (hover/focus triggers still apply in addition).
Controlled display (open attribute)
Long text
Long text and max width
Edge cases
Empty content
API
Attributes
| Attribute | Description | Type | Default |
|---|---|---|---|
content | Tooltip content text | string | — |
open | Controlled display (boolean attribute; shows when present) | boolean | — |
placement | Popup placement | Placement | top |
Slots
| Name | Description |
|---|---|
| default | — |
No public events. Shown/hidden on hover or focus; role="tooltip", the popup uses pointer-events: none so it never blocks interactions.