Tooltips
Introduction
Simply add a data-tooltip
and you are good to go! Tooltips have built-in styles and are customizable with css
variables.
Adjust placement with data-tooltip-placement
or directly in data-tooltip
as a shortcut.
Tooltips can also target a specific div using data-tooltip-target
or a the second parameter of
data-tooltip
.
Tooltips can act as popovers and trigger on click instead with data-tooltip-click
Demo
A tooltip that is always visible thanks to
data-tooltip-visible="true"
.
Nostrud deserunt culpa aliqua mollit sit ex mollit irure incididunt non anim. Anim aliquip ullamco dolor anim Lorem deserunt i have a tooltip consectetur consectetur aliquip voluptate. Esse incididunt adipisicing irure ipsum enim quis fugiat animated a bottom tootlip. I have a specific target. I'm a squared tooltip. I'm a popover target that triggers on click.
flips to right or left
depending on the available space
Dark background
Toolbar
Keep tooltips visible when going from one button to another
CSS Anchor
You can use css anchors if you want and if supported... but it's a bit limited : only top/bottom, no arrows...
This will flip automatically