Developer Tools New Tool

Free Online CSS Tooltip Generator with No JavaScript

Build a tooltip with no JavaScript, using a data-tip attribute with the before and after pseudo-elements. Choose the side, offset, arrow size, background, text colour, radius, padding, maximum width, font size and the fade delay and duration. The output covers hover and keyboard focus.

Free Forever Nothing Uploaded No JavaScript needed Runs in your browser

Free Online CSS Tooltip Generator with No JavaScript

Advertisement Slot (Top Banner) Google AdSense Unit • Responsive Banner

CSS Tooltip Generator Everything happens in this tab. Nothing you paste is sent anywhere.

Preview

Saved automatically every 30 seconds

Hover the button, then press Tab to reach it with the keyboard. Both show the tooltip, because the generated CSS writes hover and focus-visible.

CSS

Text and placing Tooltip text Side Offset px Arrow px Class name

Bubble Background Text Radius px Padding by px Max width px Font size px

Fade Delay ms Duration ms Slide in px Wrap text

Buy Us A Coffee

Enjoying WizTools123? Help keep our server infrastructure 100% free and open for everyone.

Buy Us A Coffee

Sponsored Content (Below Tool) Google AdSense Placement

How to Build a CSS Tooltip

A few steps, and nothing is uploaded.

Write the hint The tooltip text lives in a data-tip attribute on the trigger, and the CSS pulls it in with content: attr(data-tip). That is the whole trick, and it means one rule set covers every tooltip on the page.

Place it Choose the side, then the offset between the trigger and the bubble and the size of the arrow. The arrow is the after pseudo-element, drawn with borders, so it takes the bubble colour automatically.

Style the bubble Background, text colour, radius, padding, maximum width and font size. Wrap text keeps long hints readable at the chosen width, and one line suits short labels that should never break.

Copy the set The output holds the base rule, the bubble, the arrow and one rule that covers hover and focus-visible together, with the HTML it expects and the aria-describedby note as comments at the top.

What to Know About CSS Tooltips

Including the accessibility problem you have to solve yourself.

A pure CSS tooltip is invisible to keyboard and screen reader users unless you do more. Content generated by ::before is not reliably announced, and a tooltip that only appears on :hover never appears for someone who does not use a pointer. The trigger has to be focusable, which means a <button> or a link rather than a <span>, and the same text has to reach assistive technology another way. This tool writes :focus-visible beside :hover every time and puts an aria-describedby note in the output, but wiring that attribute to a real element is your job.

The bubble can be clipped by an ancestor. The tooltip is positioned inside the trigger, so any parent with overflow: hidden, overflow: auto or a transform will cut it off or trap it. This is the main limit of the CSS-only approach and there is no way around it in CSS alone. If your tooltip lives inside a scrolling panel or a card with hidden overflow, you need a JavaScript tooltip that renders the bubble at the top of the document instead.

There is no hover on a touch screen. A tap may show the tooltip and leave it stuck until the next tap elsewhere, and on some devices it does not appear at all. Never put anything a person needs in a tooltip: it is for extra detail, not for the label, the price, the error or the instruction. If the information matters, put it on the page where everyone can read it.

This page writes one tooltip pattern and does not read CSS back. There is no flipping when the bubble runs off the edge of the screen, no interactive tooltip you can put a link inside, no rich markup in the bubble, no multiple tooltips with different styles and no parsing of an existing rule set into the controls. It also does not check the contrast between your bubble text and its background.

Key Features & Capabilities

What this tool does, and what it deliberately does not.

No JavaScript One attribute and one rule set. Nothing to load, nothing to initialise.

A real trigger The preview is a button, so you can hover it and tab to it.

Focus is always written Every rule set covers focus-visible as well as hover.

Four sides Top, right, bottom or left, with the arrow placed to match.

Paste ready output The expected HTML and the aria-describedby note sit at the top.

Runs in your browser Nothing is sent anywhere. The page works with the network off.

About the CSS Tooltip Generator

A tooltip built from two pseudo-elements and one attribute is one of the tidiest things you can do with CSS. The text comes from content: attr(data-tip), the bubble is ::before, the arrow is ::after drawn with a border trick, and the whole thing costs nothing to load. Written once, it works for every hint on the site.

This page applies the generated CSS to a real button through a stylesheet in the document, which is the only honest way to preview a pseudo-element. A drawn mock-up cannot tell you whether the arrow lines up, whether the delay feels right or whether the bubble is clipped. Here you hover the button and the actual rule runs, and you can tab to it and watch the focus path behave the same way.

The part that needed a decision was accessibility. A CSS-only tooltip is genuinely not accessible on its own, and it would be easy to write a generator that never mentions that. Instead the tool always emits :focus-visible next to :hover, so keyboard users at least see the bubble, and it always writes the aria-describedby reminder into the output, because the announcement has to come from real markup rather than generated content.

Frequently Asked Questions

Screen readers, clipping, touch screens and long text.

Not dependably. Text produced by content on a pseudo-element is announced by some screen readers and skipped by others, so you should not rely on it. The usual fix is to keep the same text in a real element, hide it visually rather than with display: none, and point at it from the trigger with aria-describedby. The generated CSS includes that reminder as a comment.

Because a parent element is clipping it. The bubble is a child of the trigger, so an ancestor with overflow hidden or auto, or one that creates a containing block with a transform or a filter, will cut it at the edge. CSS on its own cannot escape that. Either remove the clipping on the ancestor or use a JavaScript tooltip that moves the bubble to the end of the body.

Not with this approach. Flipping needs to measure the trigger against the viewport, which is arithmetic CSS cannot do. If your tooltips sit near the edges of the layout, either choose a side that always has room, keep the text short enough that it does not matter, or use a positioning library. Anchor positioning will eventually make this possible in CSS, but not in every browser yet.

A button, or another naturally focusable element such as a link. A span cannot be reached by keyboard, so the tooltip is pointer only, and adding tabindex to a span gives you focus without any role or announcement. If the trigger does nothing when clicked, a button with type="button" is still the right element, and the cursor: help style tells a mouse user what it is for.

Around 200 to 400 milliseconds is comfortable. A shorter delay makes tooltips flash up while the pointer is merely crossing the screen, and a longer one feels broken because people give up before the hint arrives. The duration of the fade itself should stay short, roughly 100 to 200 milliseconds, since it is a small element appearing rather than a transition between two layouts.