<vega-tooltip
size="100"
content="This is a tooltip"
trigger="hover"
placement="top"
>
<vega-button id="valid-btn">Hover Me</vega-button>
</vega-tooltip>
Tooltips are user-triggered brief informative messages that appear when a user hovers over or clicks on an item with a mouse or pointing device. They typically also respond to keyboard interaction, when a tab action renders the element to be in focus or selected.
| Name | Description | Default |
|---|---|---|
| size | This specifies the width of the tooltip. Size may be set as a number or ResponsiveType. | - |
| placement | The default tooltip placement is ‘top’. Note: If there is not enough room to display it at the top, it will auto adjust in the following order: ‘top’, ‘left’, ‘bottom’, ‘right’. | top |
| content | the tooltip content. string | |
| trigger | May be triggered with click or hover. | hover |
| position-relative-to | This is the selector of the element that will contain the popup. If not provided, the popup will be appended to the body. If you encounter the problem of scrolling positioning, try to modify this property | |
| min-width | Specifies the minimum width of the tooltip. | |
| max-width | Specifies the maximum width of the tooltip. |
<vega-tooltip
size="any number | { [key in default|S|M|L|XL]?: any number }"
min-width="any number | { [key in default|S|M|L|XL]?: any number }"
max-width="any number | { [key in default|S|M|L|XL]?: any number }"
content="<div><p>test</p></div>"
trigger="hover|click"
placement="left|right|top|bottom"
position-relative-to="#{id} | .{class} ..."
>
<vega-button id="valid-btn">Hover Me</vega-button>
</vega-tooltip>
For more details, view in Storybook.
Tooltips do not work with mobile devices where there is no mouse or keyboard, so as of this time they are web-only components.
Use in forms for information that helps the user understand the functionality that exists, or the purpose of an element.
Tooltips may be effectively used to explain icon meaning and purpose.
Make sure that the tooltip supports both mouse hover and keyboard selection.
If using multiple tooltips on a page, use an arrow to indicate which tooltip is with which element.
Use tooltips consistently. If a tooltip is being used for one icon, if there are multiple icons, they should all use tooltips in the same way.
Do not use tooltips for important information that is necessary for a user to complete their task. They should only be used for supplemental information. For instance, information about password formatting should not be in a tooltip but should instead be displayed on a page.
Do not use redundant text in a tooltip that already exists on a page.