CSS Tooltip Generator
Pure-CSS tooltips with arrows, shown on hover and keyboard focus.
About this tool
Enter the trigger and tooltip text, pick the position (top, bottom, left or right), arrow size, radius, font size, maximum width, show delay and colours. Hover or tab to the preview to test it, then copy the CSS and HTML.
How the tooltip works
The tooltip is an absolutely positioned element inside a relatively positioned wrapper. It's placed above, below or beside the trigger with calc() and a transform for centring, and its arrow is a CSS triangle made from a transparent border with one coloured side. It's hidden with opacity and visibility, not display, so it can fade in, and both :hover and :focus-within reveal it, meaning keyboard users who tab to the button see it too. A short transition delay stops tooltips flashing as the mouse passes over. For accessibility the markup uses role="tooltip" and links it to the button with aria-describedby, so screen readers read the hint after the button's name. Honest limits: pure-CSS tooltips can't detect screen edges and flip, so test near the edges of your layout (libraries such as Floating UI handle this). WCAG 1.4.13 expects hover content to be dismissible with Escape and to stay visible while the pointer is over it, which needs a few lines of JavaScript for Escape. Touch screens have no hover, so never hide essential information in a tooltip. The CSS triangle generator, the CSS button generator and the box shadow generator are related.
Frequently asked questions
How do I make a tooltip with only CSS?
Position a hidden element inside a relative wrapper and reveal it on :hover and :focus-within. The generator writes it for you.
How do I add an arrow to a tooltip?
Use a ::after pseudo-element with transparent borders and one coloured side to form a triangle.
Are CSS tooltips accessible?
Partly. Show them on focus and use role="tooltip" with aria-describedby, and add JavaScript for Escape to dismiss.
Is anything stored or sent?
No. Everything is generated in your browser and nothing is stored or sent.