CSS Tooltip Generator
Build a small CSS-only tooltip for a button or label. Choose its placement, arrow, colours and motion, preview hover and keyboard focus, then copy the accessible HTML and CSS.
Presets
Content
Placement & trigger
Surface & type
Output
What Is a Tooltip?
A concise hint that appears beside a control when it is hovered or receives keyboard focus.
Tooltips explain a label, abbreviation or small detail without taking the user away from the current task. They should be brief and non-interactive; if the content needs links, buttons or several paragraphs, use a popover or dialog instead.
A CSS tooltip can use :hover for a pointer and :focus-within for a keyboard user. This generator outputs a focusable button, a role="tooltip" element and an aria-describedby relationship so assistive technology can associate the hint with its trigger.
The tooltip is absolutely positioned relative to its wrapper. A small rotated square makes the optional arrow; an opacity/visibility transition reveals the hint without adding JavaScript.
Test the chosen side near the edges of your own layout: CSS cannot automatically flip a tooltip when its container or viewport is too narrow. The output respects prefers-reduced-motion when animation is enabled.
How the Tooltip Works
Three small pieces connect the trigger, positioning and hidden hint.
.tooltip
A relatively positioned inline wrapper gives the absolute tooltip a stable anchor.
.tooltip__trigger
A real button is keyboard-focusable; the visible focus outline makes the trigger easy to find.
.tooltip__content
Hidden with opacity and visibility, then revealed on hover or focus. Its placement and arrow are generated together.
aria-describedby + role="tooltip"
Connects the trigger to its short description for assistive technology.
Reduced motion
The optional transition is disabled when prefers-reduced-motion: reduce is set.
How to Use the CSS Tooltip Generator
Get your result in under ten seconds.
Set the copy
Enter the trigger label and a short tooltip message.
Choose placement
Pick a side, decide whether hover and focus both reveal it, and tune the surface.
Copy and test
Copy the CSS and HTML, then check the placement in your own responsive layout.
Why Use the CSS Tooltip Generator on Developers Web Tools
Fast, accurate and private — built for developers.
Four placements
Place the tooltip above, below, left or right of its trigger.
Keyboard-ready
A focusable button and focus-within state keep the hint reachable without a mouse.
Reduced motion
Animated transitions yield to the user's reduced-motion preference.
Optional arrow
Add or remove the small pointer without changing the tooltip content.
Pure CSS
The generated tooltip needs no JavaScript on your site.
Private
Runs in your browser; the custom text is not saved or sent anywhere.
Frequently Asked Questions
Yes. The generated trigger is a button and the tooltip can appear on :focus-within. The HTML connects it with aria-describedby and role="tooltip".
No. Tooltips are for short, non-interactive descriptions. Use a popover or dialog when people need to interact with the content.
No. The output uses CSS positioning and cannot measure available space. Check the selected side in your layout; choose another placement or reduce the maximum width if it would clip.
The generated focus state also works when a user taps the button. Try the preview by tapping or tabbing to its trigger.
No. The trigger label and tooltip text stay in the current page only. The generator saves visual settings such as colour and placement in this browser's local storage.
Reuse the CSS class, but give each tooltip's id and matching aria-describedby a unique value.