A simple data-* attribute that allows for a hover-triggered tooltip with plain text in it.


Hover me for a tooltip at the top!

Hover me for a tooltip at the bottom!


<span data-tooltip="text goes here">
  hover element

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.