Your tooltip looked perfect in QA. Then someone opened the settings page on a 13-inch laptop, and it slid off the right edge. Or it vanished behind a scrolling panel. For years, the fix was JavaScript that measured the screen and nudged it back.
That changed in 2026. CSS can now tether a tooltip to its trigger and move it when space runs out.
This guide gives you a copy-ready CSS tooltip that works in any browser. Then it adds anchor positioning and the accessibility behaviors that keep it keyboard-friendly. You'll also see where CSS tooltips stop being the right tool.
What CSS tooltips are, and when they're the right call
Tooltips are those sleek little UI helpers that show up when you hover, click, or focus on an element—usually a short line of text that tells you what something does. Think of them as micro-moments of clarity: lightweight, non-intrusive, and incredibly effective when used right.
CSS tooltips are tooltips built purely with HTML and CSS—no JavaScript needed. That’s their main appeal. They’re fast, simple, and browser-native. You don’t need a third-party library or bloated codebase to get something useful on the screen. Just a few lines of CSS, maybe a ::before or ::after pseudo-element, and boom—you’ve got a tooltip.
They’re a favorite among devs who want quick wins without spinning up an entire frontend framework just to display a sentence. Want a hover-based tooltip on a button? CSS has you covered. Need to show a quick description above an icon? Again, CSS handles it, no problem.
Use cases? Plenty.
UX enhancements: Explain what an icon means without adding extra text to the layout.
Inline help: Give users guidance exactly where and when they need it—without opening modals or sidebars.
Onboarding hints: Nudge new users toward that “aha” moment by layering helpful tooltips on key actions.
So when should you write one yourself? Use CSS for one short sentence of static help on a stable element. Once the content needs a link, a button, or rules about who sees it, switch approaches. Our HTML tooltips guide covers the title attribute and scripted options.
When I audit a SaaS product's help layer, the tooltips I trust most are the plain CSS ones on static labels. They load instantly, and nobody maintains a library for one sentence of help.
A basic CSS tooltip you can copy
Let’s break down a simple CSS tooltip example and look at how other companies use them in the wild.
Here’s a basic tooltip using just HTML and CSS:
HTML:
<span class="tip">
<button type="button" class="tip__trigger" aria-describedby="tip-export">
Export
</button>
<span role="tooltip" id="tip-export" class="tip__text">
Downloads a CSV of this view
</span>
</span>
CSS:
.tip {
position: relative;
display: inline-block;
}
.tip__text {
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
translate: -50% 0;
z-index: 10;
inline-size: max-content;
max-inline-size: 16rem;
padding: 6px 10px;
border-radius: 6px;
background: #1f2937;
color: #ffffff;
opacity: 0;
visibility: hidden;
transition: opacity 150ms ease, visibility 150ms;
}
/* Invisible hover bridge so the mouse can move onto the tooltip */
.tip__text::before {
content: "";
position: absolute;
inset: -8px;
z-index: -1;
}
.tip:hover .tip__text,
.tip:focus-within .tip__text {
opacity: 1;
visibility: visible;
}
Three changes make this sturdier than the classic hover-only snippet:
Keyboard users see it.
:focus-withinopens the tooltip when someone tabs to the button.Screen readers hear it.
aria-describedbyreads the text as the button's description.It stays open under the cursor. The invisible
::beforebridge covers the gap, so moving onto the tooltip keeps it visible.
Want to see the pattern in real products? Browse more tooltip examples, or start with the two below.
Juuno example
In Juuno, a platform for managing playlists for digital signage, you’ll see this in action. Hover over the eye icon beside a playlist and a tooltip pops up: “Preview your playlist.” Super intuitive. It tells the user exactly what to expect, right when they need it.
Vanguard example
Vanguard uses a similar concept, but for finance. Next to “Contributions,” there’s a little question mark icon. Click it, and a tooltip explains Roth IRA limits for the current year. It’s just enough context to keep users informed—without derailing the flow.
Tooltips like these make interfaces feel polished, helpful, and smart.
How to position a CSS tooltip
You can write the cleanest tooltip content in the world, but if it’s covering the wrong element—or floating halfway offscreen—you’ve already lost. Tooltip positioning is one of the most overlooked parts of UI polish, and in CSS, it’s all about smart use of position: absolute and knowing your offsets.
Let’s break it down.
The positioning logic behind every CSS tooltip
The parent (tooltip trigger) should be
position: relativeThe tooltip itself should be
position: absoluteYou control where it appears using
top,right,bottom, andleftvalues
That’s it. Now let’s talk positioning strategies.
Top tooltip
.tooltip-text {
bottom: 125%;
left: 50%;
transform: translateX(-50%);
}
Pros: Keeps the flow below clean. Cons: Risk of clipping near top of viewport.
Right tooltip
.tooltip-text {
left: 105%;
top: 50%;
transform: translateY(-50%);
}
Pros: Great for vertical lists or side menus. Cons: Can get cut off on small screens.
Bottom tooltip
.tooltip-text {
top: 125%;
left: 50%;
transform: translateX(-50%);
}
Pros: Most common pattern. Natural reading direction. Cons: Might overlap other content.
Left tooltip
.tooltip-text {
right: 105%;
top: 50%;
transform: translateY(-50%);
}
Pros: Good for side-by-side layouts. Cons: Can get cramped if space is limited.
Stop tooltips from clipping at the edges
Tooltips fail at the edges in two ways: an overflow: hidden parent cuts them off, or they run past the viewport. Four habits prevent most of it:
Raise the
z-indexso it layers above nearby contentKeep tooltips out of containers with restricted overflow
Adjust placement in media queries for small screens
Test at every viewport size, not just your own monitor
And you no longer have to hand-code the escape route.
Let the browser flip it with anchor positioning
Name the trigger as an anchor, tether the tooltip to it, and list backup positions. The browser tries each one until the tooltip fits.
Wrap it in @supports and reset the old bottom, left, and translate values. Unsupported browsers skip the block and keep your fallback:
@supports (anchor-name: --tip) {
.tip__trigger {
anchor-name: --tip-export;
}
.tip__text {
position-anchor: --tip-export;
position-area: top;
bottom: auto;
left: auto;
translate: none;
margin-block-end: 8px;
position-try-fallbacks: flip-block, flip-inline;
}
}
Anchor positioning became Baseline Newly available in January 2026, when Firefox 147 shipped support (web.dev, 2026).
Keep the fallback anyway: about 86% of global users have at least partial support (Can I use, 2026). The OddBird polyfill covers older browsers.
Give every trigger its own anchor name, or every tooltip attaches to the last one.
"We spent years writing JavaScript just to keep a tooltip on screen. Anchor positioning hands that job back to the browser, but I still ship the plain absolute version underneath. Unsupported CSS fails." — Matt Stone, Co-Founder of Front End Engineering, Juuno
How to style CSS tooltips
You’ve got your tooltip in place. Now it’s time to make it look like it belongs in your product. Design is the difference between something that feels native and something that feels hacked together.
Tooltip arrows with ::before or ::after
Want that little triangle that connects the tooltip to its target? You’re making a tooltip arrow.
.tooltip-text::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
This creates a downward-pointing arrow. Adjust top, left, and border-color to match the tooltip’s direction and style.
Tooltip sitting below its trigger? Swap top: 100% for bottom: 100%, then color the bottom border instead: transparent transparent black transparent. The arrow now points up.
Fade and slide animations
Don’t just show a tooltip—reveal it.
.tooltip-text {
opacity: 0;
transition: opacity 0.3s ease;
}
.tooltip:hover .tooltip-text {
opacity: 1;
}
Want it to slide in? Use @keyframes with transform. Bonus points for timing curves like ease-in-out or cubic-bezier.
Some people get dizzy from motion, so honor prefers-reduced-motion and switch the fade off:
@media (prefers-reduced-motion: reduce) {
.tip__text {
transition: none;
}
}
For how fast a tooltip should appear, see our notes on hover tooltip timing.
Rounded corners, themes, and contrast
Styling is all about fitting your product’s visual language. Use:
border-radius: 6px;
background-color: #111;
color: #fff;
Contrast slips first on small tooltip text. Low-contrast text appeared on 83.9% of the top one million home pages (WebAIM, 2026).
Test your pair in the WebAIM Contrast Checker against the 4.5:1 minimum for normal text. Flook lets you theme globally so you don’t have to tweak every tooltip individually.
Gradients and drop shadows
background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
A soft shadow lifts the tooltip off busy backgrounds. Keep gradients dark enough to pass the contrast check above.
Make your CSS tooltip accessible
A hover-only tooltip locks out everyone on a keyboard. WCAG 1.4.13, Content on Hover or Focus, sets three rules, and your code already meets two:
Hoverable. The bridge lets the mouse move onto the tooltip.
Persistent.
:hoverplus:focus-withinkeeps it open.Dismissible. Escape must close it, which takes a few lines of script.
document.addEventListener("keydown", (event) => {
if (event.key !== "Escape") return;
document.querySelectorAll(".tip").forEach((tip) => {
tip.classList.add("is-dismissed");
});
});
document.querySelectorAll(".tip").forEach((tip) => {
tip.addEventListener("mouseleave", () => tip.classList.remove("is-dismissed"));
tip.addEventListener("focusout", () => tip.classList.remove("is-dismissed"));
});
/* Place after the hover rule so it wins */
.tip.is-dismissed .tip__text {
opacity: 0;
visibility: hidden;
}
Keep the markup lean: a real button, role="tooltip" on the text, and aria-describedby linking them. More ARIA won't help. Home pages using ARIA averaged 59.1 detected errors, against 42 without (WebAIM, 2026).
popover="hint", built for tooltip-style popovers, is an Interop 2026 focus area (web.dev, 2026). Check support before relying on it.
See tooltip accessibility for the full checklist, and use tap-friendly mobile tooltips on touch screens.
"If a tooltip needs a link or a button, it has stopped being a tooltip. Make it a popover or a proper dialog, and let the tooltip go back to one short sentence." — Elliott Risby, Co-founder and Product Designer, Frill
Where CSS tooltips stop being enough
The code is solved. Ownership is the part CSS can't fix.
Hard to maintain across multiple pages: CSS tooltips are static by nature. You define them per element, per page. That means if you’re rolling out tooltips across an app or multi-step onboarding flow, you’re duplicating styles, tweaking offsets individually, and hoping nothing breaks on different screen sizes. No global control. No versioning. And every tiny update becomes a manual fix. On a fast-moving team, that maintenance adds up quickly.
No targeting or tracking: CSS can't show tips to new users only, report who saw them, or build a tour.
Touch needs its own pattern: Hover has no tap equivalent on mobile.
Locked behind dev workflows: Every time product or UX wants to tweak a tooltip, it’s another ticket in the backlog. Want to change the copy? Test new timing? Move the position by 10px? That means editing HTML and CSS manually. For non-technical teams, CSS tooltips are a black box. You end up waiting on dev cycles for tiny UI tweaks—which kills speed and experimentation.
Copy goes stale: Fixing one word means a release. Teams that build onboarding tooltips without code fix it the same day.
One SaaS team I worked with had pure CSS tooltips across their billing settings. They looked fine in QA, then clipped inside a scrolling panel on smaller laptops, and questions about "hidden" plan limits kept reaching support. Anchor positioning fixed the clipping in a day, but every copy change still waited for a sprint. Once their PM could edit the text directly, billing-confusion tickets dropped by about a third within a month.
In the onboarding flows I've reviewed, CSS tooltips rarely fail on the code. They fail because the copy needs a developer every time the product changes.
Combine CSS control with a no-code builder
So keep CSS for what it does well, and hand the copy and placement to the people who write it.
Below are seven simple steps to create, style, and refine tooltips using CSS and no-code software.
Step 1. Map out your tooltips strategically
Before writing a line of code or opening any tool, figure out where and why you need tooltips. Think user-first: where do people tend to get stuck or hesitate? Your tooltips should serve a purpose—whether it’s clarifying a feature, encouraging a key action, or nudging users forward during onboarding.
Don’t clutter every element. Prioritize tooltips that align with your product’s goals and provide meaningful value. Tip: Start with buttons or new features that drive quick wins.
Step 2. Create your first tooltip
Once you’ve installed the Flook Chrome extension and added the embed script to your site, launch your app or webpage and open the extension. Click “Add Tooltip”, then visually select the element you want to attach it to—like a signup button or feature label.
After selecting the element, Flook allows you to drag and position the tooltip precisely. Toggle off any launcher icon if it feels redundant for the element type.
Step 3. Write helpful, on-brand text
The message inside your tooltip should be clear, actionable, and brief. Focus on what the user needs to know to take the next step. Something like: “Start your free trial with one click—no credit card needed.”
Flook makes it easy to type directly into the tooltip and edit your copy in place. Review your text for tone and consistency with your brand voice.
Step 4. Match the visual style with your product
Your tooltip should look like it belongs. Flook gives you the ability to apply themes or customize each tooltip’s appearance—background color, text color, font, border radius, shadows, etc.
Use contrast to ensure readability, and don’t overdesign. A clean, minimal tooltip usually performs better than one overloaded with style.
Step 5. Fine-tune the position and behavior
Next, dial in exactly where the tooltip appears and how it behaves. Flook lets you adjust placement so the tooltip hovers neatly above, below, or beside the element without obstructing other content.
Set when the tooltip appears—on hover, click, or focus. You can even keep it persistent for onboarding flows. For accessibility and clarity, consider adding a directional arrow to visually anchor the tooltip to its trigger.
Step 6. Go deep with element targeting (advanced CSS)
Want even more precision? Flook lets you directly edit the CSS selector used to target an element. This is where no-code meets pro-level control.
Element targeting means selecting exactly which HTML element your tooltip should attach to—whether it’s a button nested inside multiple divs or a uniquely styled component.
In the Advanced tab, toggle Edit CSS Selector and input your custom selector string. You can even preview matches to make sure it’s working (see screenshot below). This level of control is perfect when visual selection isn’t enough—especially for deeply nested or dynamic components.
Step 7. Test, gather feedback, and refine
Finally, go back through each step and review your tooltips from the user’s perspective. Are they helpful? Are they timed right? Are they easy to read?
Use Flook’s preview tools and in-product testing to see how tooltips behave live. Better yet—get user feedback and iterate. Small tweaks to wording, placement, or timing can dramatically improve engagement.
Tooltips aren’t set-and-forget—they’re part of an evolving experience. As your product grows, continue testing and refining them based on actual user behavior.
Developers keep control through selectors and themes. Product teams stop filing tickets for a changed word. Sign up for Flook and start making no-code tooltips. Use our advanced settings and CSS inputs as needed.
CSS tooltips FAQs
Can you make a tooltip with only CSS and no JavaScript?
Yes, for the visual part. A position: relative wrapper, a hidden position: absolute child, and a :hover plus :focus-within rule give you a working tooltip. Anchor positioning now handles edge-flipping too. The one gap is Escape to dismiss, which WCAG expects, so plan on a few lines of script.
How do you add an arrow to a CSS tooltip?
Add a ::after pseudo-element with empty content, then use the border trick. Give it a 5px border, color one side, and make the rest transparent. The colored side becomes the point. Place it at top: 100% for an arrow under the tooltip, or bottom: 100% when the tooltip sits below.
How do you stop a CSS tooltip from going off screen?
Start with the basics: avoid parents with overflow: hidden, and test at small viewport sizes. Then add anchor positioning inside @supports, with position-try-fallbacks: flip-block, flip-inline. The browser moves to the next position when the first doesn't fit. Browsers without support keep your original placement, so nothing breaks.
Sign up for Flook and start making no-code tooltips. Use our advanced settings and CSS inputs as needed.
Previous post: