Tooltip · humanonlyweb/ui

Examples

Basic

API

Prop	Type	Default
`text` Tooltip text. Without it, only the trigger renders.	`string`	—
`delay` Milliseconds of hover or focus before it shows.	`number`	`250`

Slot	Props
`default` The trigger. Bind `attrs` to it so the tooltip describes it.	`{ attrs: { "aria-describedby"?: string \| undefined; }; }`

Styling

For an arrow: data-tooltip-side is top or bottom after flipping, and --ui-tooltip-arrow-x is the trigger's centre from the tooltip's left edge.

Parts: tooltip-roottooltip
States: data-tooltip-side

Keyboard

Keys	Action
`Escape`	Hide without moving focus, leaving a surrounding dialog open

Accessibility

Bind the slot's attrs to the trigger, which it then describes.