Tooltip
Hover-activated UI components to display brief, contextual information
Source ↗️ Report Issue ↗️Use tooltips attached to elements for providing additional information without cluttering the interface. They are triggered on hover, and can be configured to be shown in different positions.
Hover me
To use tooltips, make sure you don’t have the includeTooltip
option set to false
in your CSS configuration. This is automatically set to true
by default.
Tooltips can be created using the data-tooltip
attribute. This makes it possible to attach a tooltip to any element or component without extra imports or setups.
Positions
By default, tooltips are shown at the top of an element. You can change the positioning using the data-position
attribute:
Styles
The style of the tooltips can be configured by overriding the following CSS variables:
If you need to override the style of an individual tooltip, simply pass a style
attribute to the element with the CSS variables:
Long Tooltips
Tooltips have a maximum width. When longer sentences are inserted, the tooltips are displayed in the following way:
API
Prop | Purpose |
---|---|
data-tooltip | Sets the tooltip content. |
data-position | Sets the position of the tooltip. Defaults to top . |
Request improvement for this page