Display

Tooltip

Short tip that shows on hover and focus, using just the data-tip attribute.

CSS only

Example

<button type="button" class="u-btn u-btn--secondary" data-tip="Copies the public link">Share</button>
<button type="button" class="u-btn u-btn--icon" data-tip="Add" aria-label="Add"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></button>

Installation

Tooltip ships in the full package, in unslop.css:

curl -fsSL unslop.leallabs.dev/i | sh

No build It's just CSS: with unslop.css on the page, the classes already work.

Classes and variants

Class	What it does
`data-tip="texto"`	On any element: the text shows above it on hover and on keyboard focus.

Accessibility and keyboard

State and roles

Where	Attribute	What it says
`aria-label`	on the element	`data-tip` is visual and screen readers don't read it. Repeat the name in `aria-label` or in the text.

Keyboard

Key	Does
Tab	visible focus shows the tip