Tooltip
A simple data-* attribute that allows for a hover-triggered tooltip with plain text in it.
Example
Hover me for a tooltip at the top!
Hover me for a tooltip at the bottom!
Implementation
<span data-tooltip="text goes here">
hover element
</span>
By default the tooltip is positioned at the top. If you want it at the bottom, add data-tooltip-bottom to the element.
Custom properties
There are several custom properties available that can be overwritten to control the looks of the tooltip.
| Custom property | Description |
|---|---|
--tooltip-surface |
Sets the background-color property.
|
--tooltip-color |
Sets color property of the text.
|
--tooltip-decoration |
Sets text-decoration on the hover element.
|