Tooltip
A Tooltips provides a short description of a page element or control that become visible when the target is hovered over or focussed on.
import { registerTooltip } from '@vonage/vivid';
registerTooltip('your-prefix');
It's best to use the anchor slot to set the anchor, but you can also use the anchor attribute. Either set it to the id of the anchor element or pass the anchor element itself.
Tooltips need to be anchored to an element. Place the anchor element inside the anchor slot of the tooltip.
Do not use a non-interactive element (div, p, etc.) as an anchor, as the Tooltip will not be accessible to keyboard or screen reader users.
The --tooltip-max-inline-size variable sets the Tooltip's max inline size.
- Default:
30ch
| Name | Type | Description |
|---|---|---|
| anchor | string or HTMLElement |
ID of, or HTML elemnent itself, to anchor the Tooltip to. Prefer using the anchor slot |
| placement | top, top-start, top-end, bottom, bottom-start, bottom-end, left, left-start, left-end, right, right-start, right-end |
Prefered placement of the Tooltip in relation to the anchor element |
| text | string |
Text content of the Tooltip |
| Name | Description |
|---|---|
| anchor | For the anchor element. |