Tooltip - Web Component
The Tooltip component can be used imported from:
Parameters
The Web component uses the <z-tooltip> tag:
By default, all the parameters are optional or can be set in different, except for the ones marked as required
The parametrization of the component can be done with the following custom HTML params:
| Name | Type | Description | Slot | A11y |
|---|---|---|---|---|
text[required] | string | The text to be displayed inside the tooltip. | ||
config | string | The main parameter has three components following the pattern:
| ||
content | string | The text to be hovered | default |
Slots
This component has slots. Check the documentation about how to use the slots.
| Name | Tags | Description |
|---|---|---|
default | span | The text to be hovered |
Parameters use
content
The thing to be assigned to the tooltip. It uses the default slot too.
text
The text parameter is used to define the text that will be displayed when the user hovers the element.
config
The config parameter is used to define the tooltip side and size. Following the pattern: <side><?:size>
side
The side parameter is used to define the position of the tooltip. Can be top, top-right, top-left, bottom, bottom-right or bottom-left.
size
The size parameter is used to define the size of the tooltip. Can be xs, s ,m or l.
Both background color and text color can be customized using the --z-tooltip--bg and --z-tooltip--color CSS variables.
Playground
Browser support
Detected engine:
Chromium
Webkit
Gecko