How to use the css tooltip generator
- 1Type your tooltip text and choose where it appears.
- 2Pick colors, size, corner radius and whether it has an arrow.
- 3Choose an animation and an optional delay.
- 4Hover the preview button, or keep Always show on while you adjust.
- 5Copy the HTML and CSS into your project.
How the tooltip works
The generated tooltip uses only CSS. The text lives in a data-tooltip attribute on the element, and CSS draws it with a ::after pseudo-element. A second pseudo-element, ::before, draws the arrow using a border triangle. There is no JavaScript and nothing extra to load.
The tooltip appears on hover and also on keyboard focus (:focus-visible), so people using a keyboard see it too.
Accessibility
Screen readers do not reliably read text from CSS pseudo-elements. Keep tooltips for helpful extras, not essential information. If the tooltip names a button that has only an icon, also give the button an aria-label with the same text.
Avoid tooltips on touch-only interfaces for anything important, because there is no hover on phones.
Tips
- Keep tooltip text short: a few words or one sentence.
- A small delay (around 200 to 400ms) prevents tooltips flashing as the mouse passes over a toolbar.
- Make sure the tooltip colors have good contrast. Dark backgrounds with white text are the most readable.
Frequently asked questions
Do CSS tooltips work without JavaScript?
Yes. This tooltip is pure CSS, using a data attribute and pseudo-elements.
Are CSS tooltips accessible?
They show on keyboard focus, but screen readers may not announce them. Use aria-label for essential information.
Why is my tooltip cut off?
A parent element may have overflow: hidden, or the tooltip runs off the screen edge. Change the position or remove the overflow setting.
Last updated