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 popover target that triggers on click.