Tooltips

Hover and focus-visible labels. data-tooltip on any element. No JavaScript.

Tooltips display a floating label on hover or keyboard focus. They're built entirely in CSS — no JavaScript, no library. The text comes from the data-tooltip attribute itself, rendered via content: attr(data-tooltip). An underline signals interactivity; the tooltip appears above by default.

Basic

Add data-tooltip to any inline element. Hover or tab to it:

The term data-tooltip renders above by default. It works on any element — HTML, code, or plain text.

<span data-tooltip="A semantic attribute, not a class">data-tooltip</span>
<abbr data-tooltip="Hypertext Markup Language">HTML</abbr>

The underline comes from border-bottom: 1px dotted — it signals the term is annotated without being confused with a link.

Bottom placement

Use data-tooltip-position="bottom" when the tooltip would be clipped by the viewport edge, or for elements near the top of the page:

This tooltip appears below the element. Useful near page tops where there's no room above.

<span
  data-tooltip="I'm below the text"
  data-tooltip-position="bottom">below</span>

Accessibility

Tooltips reveal on :hover and :focus-visible. Keyboard users reach them with Tab; the tooltip appears as soon as the element is focused. This matches the WAI-ARIA tooltip pattern for supplemental (non-essential) text.

Essential information

Tooltips hide from screen readers by default (they read the visible text, not the tooltip). If the tooltip text is necessary to understand the element, use a <details> block or visible label instead.

For interactive elements like buttons, add aria-label alongside data-tooltip:

<button data-tooltip="Delete this item" aria-label="Delete">×</button>

Reference

Attribute	Values	Description
`data-tooltip`	Any string	Tooltip text. Required to activate.
`data-tooltip-position`	`bottom`	Place tooltip below instead of above.