Design and generate pure CSS tooltips with arrow positioning, animations, and responsive behavior.
Pick where the tooltip sits relative to its trigger, which way the arrow points and how far off-center, the background and text colors, corner radius, and an entrance animation. The tool returns the HTML structure plus one block of CSS to paste. Show and hide are pure CSS - hovering the trigger toggles the tooltip, and the arrow is a bordered ::after triangle - so no JavaScript is involved. The common surprise: pasting the code into a page where an ancestor has overflow: hidden or its own positioning silently clips the tooltip or moves it away from the trigger.
A concrete input and expected output from the current implementation.
Input
Position: above the trigger. Arrow: centered, pointing down. Width: 160px. Background: #111827, text: #f9fafb. Radius: 8px. Animation: fade-in, 150ms.
Expected output
<div class="tooltip">Hover me<span class="tooltip-text">Tooltip text</span></div>
.tooltip { position: relative; display: inline-block; }
.tooltip-text {
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
width: 160px;
padding: 8px 12px;
background: #111827;
color: #f9fafb;
border-radius: 8px;
opacity: 0;
pointer-events: none;
transition: opacity 150ms ease;
}
.tooltip:hover .tooltip-text { opacity: 1; }
.tooltip-text::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border: 5px solid transparent;
border-top-color: #111827;
} The wrapper is position: relative, so the tooltip anchors to it: bottom: calc(100% + 8px) floats the box above with an 8px gap, and left: 50% plus translateX(-50%) centers it. The ::after triangle is 10px wide (5px border per side); at left: 50% its left edge starts at center, so margin-left: -5px recenters it. Hover flips opacity for the 150ms fade; no JavaScript.
The trigger wrapper gets position: relative, making it the containing block. The tooltip is position: absolute, offset with bottom: calc(100% + gap) or the top/left/right equivalents depending on the chosen side, and centered with left: 50% plus translateX(-50%). The arrow is a ::after box with zero size: a transparent border with one edge recolored, so the triangle's size equals the border width.
The generator emits a :hover rule on the wrapper - hovering the trigger animates the tooltip from opacity: 0 to fully visible. The chosen animation maps to a transition on opacity and optionally transform (a fade-and-rise effect) with your chosen duration and easing. Because opacity: 0 elements still receive pointer events, the hidden state also sets pointer-events: none, so an invisible tooltip cannot intercept clicks.
Yes. The generated code relies on the :hover pseudo-class to show and hide, so it works before scripts load and needs no library. But hover-driven visibility is not click-to-toggle: for tap, keyboard focus, or programmatic control you would add :focus-within or a small script yourself - the generated CSS will not do that for you.
Almost always an ancestor. A parent with overflow: hidden or overflow: auto clips the tooltip to that parent's box, and any positioned ancestor becomes the tooltip's containing block, so it anchors there instead of to the trigger. Check for overflow values and position values up the tree; the wrapper the generator marks position: relative is where the tooltip should anchor.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.