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
Native title Attribute Tooltips
The browser renders a native bubble tooltip for elements with the title attribute.
Hover slowly to see the native tooltip.
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