modern-now

Back

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.

Dark background

Commodo cillum ut exercitation sit excepteur aliquip. Esse duis quis pariatur quis laboris officia mollit aute Lorem enim do. Nisi ipsum eiusmod sit irure Lorem fugiat amet est adipisicing. Veniam ea consectetur adipisicing mollit eiusmod commodo tempor incididunt laborum nulla commodo non. Quis reprehenderit labore veniam est. Dolor nostrud esse enim aliquip ad laboris velit mollit. Exercitation veniam nisi dolore laboris anim tempor sit.

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