Tooltip

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

npm install @vrembem/tooltip

@use "@vrembem/tooltip";

Example tooltip

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

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>

Tooltip

[data-tooltip]

[data-tooltip-pos]