CSS Tooltip Generator
Build a pure-CSS tooltip with hover styles and placement.
Pure-CSS tooltips
A simple tooltip on hover often does not need JavaScript — CSS pseudo-elements can show a label with an arrow on any side. This generator builds that pure-CSS tooltip with your text and placement, previewed live.
A ready recipe handles the positioning, arrow, and hover reveal that are tedious to write from scratch. Choose the placement, copy the CSS, and attach it to an element for a lightweight tooltip with no dependencies.
Copy-ready tooltip
A CSS-only tooltip shows a pseudo-element on hover and focus, so it works without JavaScript though it is not a full accessibility solution. Generated in your browser.
Frequently asked questions
Where does the tooltip text come from?
The data-tooltip attribute, read by content: attr(data-tooltip) in the ::after pseudo-element, so each element can carry its own text without extra markup.
Which positions are supported?
Above or below the element, centered horizontally. For left or right placement, change the output to use right: 100% or left: 100% with top: 50% and a translateY(-50%).
Are pure-CSS tooltips accessible?
Not fully. They appear on hover only, and pseudo-element text is not reliably announced. Add :focus-visible to the show rule and put important text in aria-describedby or visible copy.
Related tools
Practical utilities for front-end design and implementation work.