Create a tooltip without JavaScript: pick the side, arrow, colors, size and animation, see it live, and copy clean HTML and CSS. Choose a lightweight data-tooltip attribute version or an accessible version with role="tooltip" and aria-describedby.
Last updated:
Themes
Untick to test hover and keyboard focus
Position & arrow
Animation
Bubble style
HTML
CSS
Advertisement
Advertisement
How to use the CSS Tooltip Generator
Choose a theme such as Dark, Light or Brand.
Pick the position (top, right, bottom or left) and the arrow size.
Style the bubble: colors, padding, corner radius, font size, maximum width and distance from the element.
Set the animation and an optional delay, then hover or Tab to the preview button (untick Pin to test it).
Copy the HTML and CSS and change the tooltip text in your markup.
Two ways to build a CSS tooltip
Child element + role="tooltip"
data-tooltip attribute
Markup
Wrapper span, trigger and a tooltip span
One attribute on the trigger
Tooltip content
Any HTML (bold text, links are not recommended)
Plain text only, via content: attr(data-tooltip)
Screen readers
Announced as the description through aria-describedby
Pseudo-element text is read inconsistently
Shows on
:hover and :focus-within
:hover and :focus-visible
Best for
Important hints, icon buttons, forms
Quick decorative hints in prototypes
How the positioning works
The trigger (or its wrapper) gets position: relative, and the bubble is absolutely positioned against it. For a top tooltip the bubble uses bottom: calc(100% + distance) and left: 50% with transform: translateX(-50%) to center it. width: max-content keeps short labels on one line while max-width wraps long ones.
The arrow is a CSS triangle: a zero-size pseudo-element with a transparent border and one colored side. A border of n pixels gives a triangle 2n wide and n tall. The generator adds the arrow size to the bubble's offset so the distance you set is measured from the element to the arrow tip.
Tooltip best practices
Keep tooltips short (a few words to one sentence) and never put essential information only in a tooltip, because touch screens have no hover.
Show the tooltip on keyboard focus as well as hover; the generated CSS does both.
A small show delay (100–300 ms) prevents tooltips flashing when the pointer just passes over the element.
Check text contrast: aim for at least 4.5:1 between the tooltip text and background.
Avoid interactive content such as links inside tooltips; use a popover or dialog for that.
Frequently asked questions
How do I make a tooltip with only CSS?
Position the tooltip absolutely inside a relatively positioned element and hide it with opacity: 0 and visibility: hidden. On :hover and :focus-visible (or :focus-within) set opacity: 1 and visibility: visible. The text can come from a data-tooltip attribute through content: attr(data-tooltip) on a pseudo-element, or from a child element.
How is the tooltip arrow made?
The arrow is a CSS triangle: an empty pseudo-element with a transparent border on all sides and a colored border on one side. A 6px border with border-top-color set draws a downward-pointing triangle 12px wide and 6px tall, placed right under the bubble.
Which version is more accessible?
The child-element version. The tooltip is a real element with role="tooltip" connected to the trigger with aria-describedby, so screen readers announce it reliably. Text generated with content: attr() is skipped by some screen readers, so use the data-tooltip version only for supplementary hints.
Why use visibility as well as opacity?
opacity: 0 alone leaves the tooltip in place where it can still be hovered and block clicks. visibility: hidden removes it from interaction while still allowing a smooth transition, because visibility switches at the end of the fade-out.
Can a CSS tooltip be dismissed with the Escape key?
Not with CSS alone. WCAG 1.4.13 asks that content shown on hover or focus can be dismissed without moving the pointer or focus; if your tooltip may cover important content, add a small script that hides it on Escape, or keep it short and positioned so it does not cover anything.
How do I stop the tooltip from going off-screen?
Pure CSS cannot detect the viewport edge. Choose a position with enough room (for elements near the top, use bottom), keep the max width small, or use a positioning library such as Floating UI when the trigger can be anywhere.
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.