Open menu

CSS Tooltip Generator

Design tooltips that work with a mouse, keyboard and screen reader. Choose the position, arrow, colors, shape, animation and delay. The pattern follows WCAG 1.4.13, so the tooltip appears on hover and on keyboard focus, stays open while you move the pointer onto it, and the optional script closes it with Escape. The trigger references the tooltip with aria-describedby, so screen readers read it as a description.

Preset gallery
Saves your changes without publishing them.
Saves your changes without publishing them.
Open

Accessibility checks

  • Pass Tooltip text has 17.1:1 contrast, which meets WCAG AA.
  • Pass The tooltip opens on hover and keyboard focus, and stays open while the pointer is over it (WCAG 1.4.13).
  • Pass The JavaScript tab adds Escape-to-close, so the tooltip can be dismissed without moving the pointer (WCAG 1.4.13).
  • Pass A 150ms delay avoids flicker when the pointer passes over.
  • Check Tooltips are invisible on touch screens until tapped. Keep essential information in the page itself, not only in a tooltip.

Export code

<span class="tip">
  <button class="tip__trigger" type="button" aria-describedby="tip-1">Save draft</button>
  <span class="tip__bubble" role="tooltip" id="tip-1">Saves your changes without publishing them.</span>
</span>
Favourites on this device (0)

No favourites yet.

Behavior & text
Position
Animation
Shape
Colors

How to use the tooltip generator

  1. Choose the position: top, right, bottom or left.
  2. Pick an animation (fade, scale, slide or instant) and set the delay before it appears.
  3. Write the button text and tooltip text.
  4. Shape it: arrow on or off and its size, gap, corner radius, padding, maximum width, font size and shadow.
  5. Set colors and check the contrast.
  6. Export HTML, CSS and the small JavaScript for Escape, or SCSS, Tailwind or React.

The markup

<span class="tip">
  <button class="tip__trigger" type="button" aria-describedby="tip-1">Save draft</button>
  <span class="tip__bubble" role="tooltip" id="tip-1">Saves your changes without publishing them.</span>
</span>

The bubble is hidden with opacity and visibility, so it isn’t announced until it’s shown. :hover and :focus-within on the wrapper reveal it after the delay.

Worked examples

Example 1: icon buttons in a toolbar

Use Classic with a short label like “Bold” for each icon button. The button still needs its own accessible name (an aria-label or hidden text). The tooltip just shows it visually.

Example 2: explaining a disabled feature

Use Light soft to explain why an option is unavailable (“Upgrade to Pro to export PDFs”). Make sure the trigger can still receive focus; disabled buttons can’t, so use aria-disabled instead.

Example 3: copy confirmation

Use Pill with the text “Copied!” and the Instant animation, and add the open class from your copy script for a moment after copying.

Tips

  • Keep tooltip text short: one sentence at most.
  • A 100–300ms delay avoids tooltips flashing as the pointer passes over.
  • On touch screens, tooltips appear on tap focus at best, so never hide important information in them.

Common mistakes

  • Tooltips on non-focusable elements. A tooltip on a plain span never appears for keyboard users.
  • Links inside tooltips. People can’t reliably reach them. Use a popover or dialog instead.
  • Tooltips that cover the trigger. Choose a position that keeps the trigger and nearby content visible.

Frequently asked questions

Why not use the title attribute?

Browser title tooltips can't be styled, don't appear on keyboard focus in most browsers, never appear on touch screens, and disappear while you read them. A custom tooltip linked with aria-describedby fixes all of that except touch, which is why tooltips should only hold extra, non-essential information.

What does WCAG 1.4.13 require?

Content that appears on hover or focus must be dismissible without moving the pointer or focus (Escape), hoverable (you can move the pointer onto it), and persistent (it stays until you leave or dismiss it). The CSS keeps it open while hovered, and the small script adds Escape.

How does the tooltip stay open when moving the pointer onto it?

The bubble is inside the wrapper, and an invisible bridge fills the gap between the trigger and the bubble. The wrapper stays in its :hover state the whole way.

Can tooltips go on any element?

Put them on focusable elements such as buttons and links, so keyboard users can reach them. Don't put essential instructions in a tooltip, and never put interactive content like links inside one; use a popover or dialog for that.

Can tooltips work on touch screens?

Only partly, because there's no hover. Make the trigger a button that shows the tip on tap or focus, and never put essential information only in a tooltip.

Sources