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.
| Property |
Type |
Default |
Description |
| anchor |
string | HTMLElement |
|
ID or direct reference to the component's anchor element. |
| open |
boolean |
|
|
| placement |
'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-end' | 'left-start' | 'right-end' | 'right-start' |
|
|
| text |
string |
|
Text content of the Tooltip |
| Property |
Type |
Default |
Description |
|
anchor
|
string | HTMLElement |
|
ID or direct reference to the component's anchor element. |
|
open
|
boolean |
|
|
|
placement
|
'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-end' | 'left-start' | 'right-end' | 'right-start' |
|
|
|
text
|
string |
|
Text content of the Tooltip |
| Name |
Description |
| anchor |
Used to set the anchor element for the tooltip.
|
| Name |
Description |
| anchor |
Used to set the anchor element for the tooltip. |
| Event |
Type |
Description |
| blur |
FocusEvent |
Fires when the element loses focus. |
| click |
MouseEvent |
Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element. |
| focus |
FocusEvent |
Fires when the element receives focus. |
| input |
Event |
Fires when the value of an element has been changed. |
| keydown |
KeyboardEvent |
Fires when a key is pressed. |
| keyup |
KeyboardEvent |
Fires when a key is released. |
| Name |
Type |
Description |
| blur |
FocusEvent |
Fires when the element loses focus. |
| click |
MouseEvent |
Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element. |
| focus |
FocusEvent |
Fires when the element receives focus. |
| input |
Event |
Fires when the value of an element has been changed. |
| keydown |
KeyboardEvent |
Fires when a key is pressed. |
| keyup |
KeyboardEvent |
Fires when a key is released. |
