Skip to content
Convertto

Pure CSS Tooltip Generator With Arrow

Generate a tooltip from a data attribute — no JavaScript, no extra markup.

A CSS tooltip is a pseudo-element reading its text from a data attribute, so the markup stays one element and there is no JavaScript to load or position. It appears on hover and on :focus-visible, which is what makes it reachable by keyboard rather than mouse-only. The arrow is a second pseudo-element built from a transparent border — a border-only box with three sides transparent renders as a triangle, which is why no image is needed.

Runs in your browser
Privacy
Runs entirely in your browser — nothing is uploaded
Cost
Free, unlimited, no sign-up

Frequently asked questions

Is a CSS tooltip accessible?

Partly. Including :focus-visible makes it reachable by keyboard, which a hover-only tooltip is not. But a pseudo-element is not announced by every screen reader, so anything essential should also be in an aria-label or visible text — treat this as a visual affordance, not the only copy of the information.

How does the arrow work with no image?

A zero-size box with a thick border renders its four border sides as triangles meeting at the middle. Make three of them transparent and the fourth is a single triangle pointing away from the visible side.

Why does my tooltip get cut off?

An ancestor with overflow: hidden clips it, because the tooltip is a child of the trigger. Either remove that overflow on the ancestor or use the Popover API, which escapes the clip by rendering in the top layer.

How to use the css tooltip generator

  1. 1Choose the position.
  2. 2Set the distance.
  3. 3Pick the background.
  4. 4Pick the text.
  5. 5Set the corner radius.
  6. 6Turn "Show the arrow" on or off as needed.
  7. 7The result appears immediately — copy or download it.

Embed this tool

Put the working css tooltip generator on your own site. It runs in your visitors' browsers exactly as it does here — free, no account, nothing uploaded.

Share this tool

Related tools

CSS Button GeneratorDesign a button and copy the CSS, including the hover, active and focus-visible states.CSS Hover Effect GeneratorGenerate a hover effect that animates cleanly, with the reduced-motion guard included.CSS Scrollbar StylerStyle a scrollbar with both the standard properties and the WebKit pseudo-elements.CSS Border Radius GeneratorDrag eight handles to shape every corner: elliptical radii, inverted corners and squircles.CSS Box Shadow GeneratorDesign a CSS box-shadow with live values for offset, blur, spread and colour.CSS Clamp GeneratorGenerate fluid clamp() values that scale smoothly between two viewport widths.

Last updated

More css generators