Tooltips

Multiple tooltip patterns: CSS-only, jQuery UI, aria-describedby, and title attribute. Practice hovering to reveal tooltip text.

Hidden DOM Tooltip (Debug Only)

The tooltip below is injected into the DOM only on hover. It is not present in the page source — inspect via DevTools while hovering to see it.

CSS-Only Tooltips (data-tooltip)

Hover: Inline Text Image with tooltip

Native title Attribute Tooltips

The browser renders a native bubble tooltip for elements with the title attribute. Hover slowly to see the native tooltip.

Link with title

jQuery UI Tooltips

jQuery UI enhances title attributes into styled popups.

jQuery UI: Span

ARIA-Describedby Tooltip

Accessible tooltip pattern using aria-describedby and a visually-hidden description element.

ARIA tooltip — accessible to screen readers