Tooltip

Tooltips are CSS-only overlays that appear on hover or keyboard focus. They use the data-tooltip attribute — no JavaScript required.

Tokens

Basic usage

<span data-tooltip="This is a tooltip">Hover over me</span>

On interactive elements

<button class="button" data-tooltip="Save your changes">Save</button>

On buttons and links, the cursor remains pointer instead of the default help.

Positions

By default, tooltips appear above the element. Use data-tooltip-position to change placement.

<span data-tooltip="Above (default)">Top</span>
<span data-tooltip="Below" data-tooltip-position="bottom">Bottom</span>
<span data-tooltip="To the left" data-tooltip-position="left">Left</span>
<span data-tooltip="To the right" data-tooltip-position="right">Right</span>

Accessibility notes

• Tooltips appear on :hover and :focus-visible
• Content is set via data-tooltip attribute and rendered with content: attr(data-tooltip) — it is not accessible to screen readers
• For critical information, do not rely on tooltips alone — add aria-label or visible text
• Tooltips use pointer-events: none so they do not interfere with interaction

Do / Don't

Do:

• Use tooltips for supplementary, non-essential information
• Keep tooltip text short (one sentence max)
• Add aria-label when the tooltip contains essential context

Don't:

• Don't put interactive content (links, buttons) in tooltips
• Don't use tooltips for critical information that must be visible
• Don't use tooltips on touch-only interfaces (they require hover)