Tooltip

Text labels that appear when a user hovers over, focuses on or touches an element.

npm version

Source Code

npm install @vrembem/tooltip
@use "@vrembem/tooltip";

[data-tooltip]

Example tooltip
<span data-tooltip="...">...</span>

[data-tooltip-pos]

Tooltip up left Tooltip up Tooltip up right
<span data-tooltip="..." data-tooltip-pos="up-left">...</span>
<span data-tooltip="..." data-tooltip-pos="up">...</span>
<span data-tooltip="..." data-tooltip-pos="up-right">...</span>
Tooltip down left Tooltip down Tooltip down right
<span data-tooltip="..." data-tooltip-pos="down-left">...</span>
<span data-tooltip="..." data-tooltip-pos="down">...</span>
<span data-tooltip="..." data-tooltip-pos="down-right">...</span>
Tooltip
left up
Tooltip
left
Tooltip
left down
<span data-tooltip="..." data-tooltip-pos="left-up">...</span>
<span data-tooltip="..." data-tooltip-pos="left">...</span>
<span data-tooltip="..." data-tooltip-pos="left-down">...</span>
Tooltip
right up
Tooltip
right
Tooltip
right down
<span data-tooltip="..." data-tooltip-pos="right-up">...</span>
<span data-tooltip="..." data-tooltip-pos="right">...</span>
<span data-tooltip="..." data-tooltip-pos="right-down">...</span>