About CSS Tooltip Builder

Build a pure-CSS tooltip from data-attr — top/bottom/left/right positions. Part of the DevTools Surf developer suite. Browse more tools in the CSS collection.

Use Cases

• Frontend developers building accessible tooltips without JavaScript
• UI designers prototyping tooltip styles and positions visually
• Documentation teams adding contextual help text to complex form fields
• Accessibility engineers creating keyboard-focusable tooltip patterns

Tips

• Choose from top, bottom, left, or right tooltip positions
• The tooltip uses a CSS data-attribute so no JavaScript is required
• Customize arrow size, background color, and text color for brand consistency

Fun Facts

• Pure CSS tooltips became possible with the attr() function and ::before/::after pseudo-elements — before CSS3, all tooltips required JavaScript libraries like jQuery Tippy.
• The word 'tooltip' originated from Microsoft's early 1990s UI guidelines, describing small text labels that appeared when hovering over toolbar icons in Windows 3.1.
• Studies show tooltips improve task completion rates by 15-25% in complex interfaces, but tooltips that appear in less than 200ms are perceived as 'jumpy' and distracting.

FAQ

Is the tooltip keyboard-accessible?

Partially. The pure-CSS version works with :hover and :focus, but ARIA-aria-describedby needs a small JS addition for full screen-reader support. The tool notes this in the output.

Does it position on all four sides?

Yes — top, right, bottom, left. The arrow automatically flips to point at the trigger.

What about collision detection?

Pure CSS can't detect viewport edges. For smart repositioning use a JS library like Floating UI; use this tool for simple, predictable tooltips.

Can I put HTML inside the tooltip?

The data-attribute approach only holds text. For rich content (images, links) switch to a sibling <span> or a JS tooltip.