Browse 25+ Tools

CSS Tooltip Generator

Design lightweight, zero-dependency tooltips. Configure position, colors, and arrows visually to generate elegant pure CSS popups.

<span class="css-tooltip" data-tooltip="Your text here">Hover Me</span> 
/* Generated on cssgen.org */

The Elegance of Pure CSS Popups

In the modern web ecosystem, developers often reach for heavy JavaScript libraries to accomplish simple tasks. However, if you only need to display a short string of text when a user hovers over an icon or button, downloading a 30kb JS library is massive overkill.

By leveraging HTML5 data-* attributes, we can build a highly performant, zero-dependency tooltip. The text is stored directly in the HTML markup (making it accessible to screen readers), and CSS reads that text using the content: attr(data-tooltip); property to display it in a beautifully styled popup.

💬

Pro Tips for Tooltips

  • The CSS Triangle: The small arrow pointing from the tooltip to the element is actually drawn using transparent borders! If you want to understand the math behind this trick, play with our CSS Triangle Generator.
  • Accessibility First: Because the tooltip relies on the :hover state, keyboard-only users will miss it unless you also trigger the tooltip on the :focus or :focus-visible pseudo-classes. Our generated code handles this automatically for you.
  • When to use JavaScript: Pure CSS tooltips are brilliant for plain text. But, if you need to put a clickable link inside your tooltip, or if your tooltip is so large that it might get cut off by the edge of a mobile phone screen, you should upgrade to a robust JS positioning engine like Floating UI.
🔗

Support This Free Tool

If this tool helped you ditch a heavy JS dependency today, the best way to say thanks is by linking to us from your dev blog or repository. Just copy the snippet below!

<a href="https://cssgen.org/tooltip" target="_blank" rel="noopener noreferrer">Pure CSS Tooltip Generator</a>

Frequently Asked Questions

How do you make a tooltip in pure CSS?

You create a pure CSS tooltip by applying the ::before and ::after pseudo-elements to a parent container. The ::before element acts as the text box, and the ::after element acts as the arrow. By storing the text in a custom HTML attribute like data-tooltip="Hello", you can pull that text into CSS using the content: attr() property.

Can I put HTML or images inside a pure CSS tooltip?

No. The CSS content property can only render raw strings of text. It cannot parse HTML tags. If you need a tooltip that contains bolded words, images, or clickable links, you must build the tooltip using standard hidden HTML `div` elements and toggle their visibility with JavaScript or CSS sibling selectors.

Why does my tooltip get cut off by the edge of the screen?

Because CSS tooltips are rigidly positioned (e.g., exactly 100% above the element), they do not know where the edge of the viewport is. If an element is at the very top of the screen and the tooltip is set to "Top", it will render off-screen. This is the primary limitation of CSS tooltips compared to JS positioning engines.