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 or a JS tooltip.

CSS Tooltip Builder | DevTools Surf

DevTools Surf

Example: CSS Tooltip Builder

A worked example, rendered from real sample data. Sign in to run the tool on your own input.

Input

bg=#18181b color=#fafafa dir=top

Output

.tooltip { position: relative; display: inline-block; }
.tooltip::after {
  content: attr(data-tip);
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  margin-top: 8px;
  background: #18181b; color: #fafafa;
  padding: 6px 10px; border-radius: 6px; font-size: 12px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 150ms ease;
}
.tooltip:hover::after { opacity: 1; }

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.

Related CSS Tools

Minify CSS CSS Beautifier CSS Formatter CSS Pretty Print CSS to LESS CSS to SCSS CSS to SASS CSS to Stylus