EspañolCSS tooltip generator
Choose the position and style and hover (or Tab) over the preview buttons. The code uses no JavaScript.
How to useA hint that appears on hover
Available in: 
CSS tooltip generator: what it is for
A tooltip is the short hint that appears when you hover over a button or icon. This generator makes the hint with CSS only, in four positions, with an optional arrow, colors, corners and a delay so it doesn't flicker when the mouse just passes over.
The code is accessible: the hint is linked to the button via aria-describedby, has role=tooltip, also appears when the element gets keyboard or touch focus and respects people who prefer less motion. The preview has three buttons to test.
How to use
- Choose the position, colors and corners.
- Adjust the delay and the arrow.
- Copy the HTML and CSS.
When to use it
- Explaining icons without text.
- Hints in forms.
- Action buttons in dashboards.
Frequently asked questions
Does the tooltip work on phones?
Phones have no hover; the hint appears when the element receives focus, by tapping a button or link. So don't put information people absolutely need in a tooltip: it should also be in the page text.
How is it accessible?
The hint text sits in an element with role=tooltip linked to the button via aria-describedby, so screen readers read it along with the button's name. It also appears on keyboard focus (focus-visible) and doesn't rely on color alone.
Why is there a delay before it appears?
A small delay keeps hints from flickering when the mouse just passes over on its way somewhere else. Hiding is immediate.
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.