Generator Tools
CSS Tooltip Generator
Build pure CSS hover tooltips with a live preview. Pick position, arrow, colors, padding, delay, and copy CSS, HTML, or both.
CSS Tooltip Generator
Tooltip text
Multi-line text is supported. Newlines render as line breaks inside the tooltip bubble.
Position
Trigger element
Style
Live preview
Hover or focus the trigger to reveal the tooltip. The preview uses the exact CSS the copy buttons return.
Output
.tooltip {
position: relative;
display: inline-block;
}
.tooltip::before {
content: "Copy to clipboard";
position: absolute;
bottom: calc(100% + 10px); left: 50%; transform-origin: 50% 100%;
z-index: 10;
max-width: 220px;
width: max-content;
padding: 8px 12px;
border-radius: 8px;
background: #0f172a;
color: #f8fafc;
font-size: 13px;
line-height: 1.45;
font-weight: 500;
text-align: center;
white-space: pre-line;
pointer-events: none;
opacity: 0;
transform: translate(-50%, 4px);
transition: opacity 0.16s ease, transform 0.16s ease;
}
.tooltip::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -6px;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #0f172a;
pointer-events: none;
opacity: 0;
transition: opacity 0.16s ease;
}
.tooltip:hover::before, .tooltip:focus-visible::before, .tooltip:hover::after, .tooltip:focus-visible::after {
opacity: 1;
transform: translate(-50%, 0px);
transition-duration: 0.16s;
transition-delay: 0.12s;
}
@media (prefers-reduced-motion: reduce) {
.tooltip::before, .tooltip::after {
transition: opacity 0.16s ease;
transform: translate(-50%, 0px);
}
}Tips
- The tooltip text is set inside the CSS `content` rule, so it stays with the stylesheet. Update the rule when the text changes, or duplicate the class for multiple labels.
- For accessibility, set an `aria-label` (or `aria-describedby`) on the trigger so screen readers announce the tooltip text. CSS pseudo-elements are not always reachable to assistive tech.
- The tooltip reveals on `:hover` and on `:focus-visible`, so keyboard users see the tooltip when they tab to the trigger.
- A `prefers-reduced-motion` block disables the slide animation while keeping the fade, so the tooltip respects user motion settings out of the box.
How to use
- Type the tooltip text in the input box. Multi-line text is supported and renders as line breaks inside the bubble.
- Pick a position (Top, Bottom, Left, Right), a trigger style (Button, Link, Icon, Inline text), and toggle Show arrow on or off.
- Tune the bubble: background and text colors, font size, padding, corner radius, max width, gap from the trigger, show delay, and animation duration. The live preview updates on every change.
- Hover or focus the preview trigger to confirm the tooltip reads the way you want on Dark, Light, and Checker backgrounds.
- Switch the output tab between CSS, HTML, and HTML + CSS, then click Copy to grab the snippet for your stylesheet, component, or documentation page.
About this tool
CSS Tooltip Generator builds a pure-CSS hover tooltip in your browser, with a live preview that always renders the exact CSS the tool will copy. The generated tooltip uses the well-known ::before pseudo-element pattern: the trigger element gets `position: relative` and its `::before` is positioned absolutely above, below, left, or right of the trigger. Visibility is driven entirely by `:hover` and `:focus-visible`, so the tooltip reveals for mouse users, keyboard users, and assistive tech that triggers focus. No JavaScript is required and no event listeners ship to the page. Controls cover every common knob: position (top, bottom, left, right), trigger style (button, link, icon, inline text), arrow on or off (drawn as a CSS triangle with `border`, no SVG), bubble background and text color, font size, vertical and horizontal padding, corner radius, max width, gap from the trigger, show delay, and animation duration. The output emits the exact CSS declaration block as a ready-to-paste stylesheet snippet, a matching HTML snippet for the trigger element with an `aria-label` so screen readers announce the tooltip text, or a complete HTML + CSS block wrapped in a `<style>` tag for one-paste use in CodePen, an MDX doc, or a documentation site. A `prefers-reduced-motion` media block is included automatically so the tooltip respects user motion preferences without an extra step. The bubble text supports multi-line input: line breaks in the textarea become `\A` escapes in the CSS string and render as line breaks in the rendered bubble. Everything runs locally; the text, colors, and class names you experiment with here are never uploaded.
Free to use. Works in your browser. No signup, no login.
Related tools
You may also like
CSS Box Shadow Generator
Layered box-shadow with live preview, opacity, inset, and Tailwind output.
Open tool
GeneratorCSS Triangle Generator
Visual border-trick triangle builder with CSS, JSX, Tailwind, and SVG output.
Open tool
GeneratorCSS Animation Generator
Visual builder for CSS keyframe animations with presets, custom steps, easing, and a live preview.
Open tool
GeneratorCSS Loading Spinner Generator
Eight pure-CSS loader styles with size, color, speed, and stroke controls.
Open tool
GeneratorCSS Text Shadow Generator
Visual editor for stacked CSS text-shadow with neon, retro, and outline presets.
Open tool