Softonic

CSS Tooltip Generator

Step 1 / 2
Next

Tooltips are often the first place a project reaches for a JavaScript library, but a plain ::after pseudo-element driven by a data-tooltip attribute covers 90% of real cases. This generator outputs the exact .tooltip and .tooltip::after rules you need, pick top, bottom, left or right positioning, tune the background and text color, and copy the block into your stylesheet.

How to wire the tooltip into your HTML

  1. 1

    Choose a position

    Top, bottom, left or right. The generator uses `calc(100% + 8px)` plus the right transform so the bubble sits flush against the trigger.

  2. 2

    Pick colors

    The background drives the bubble, the text color is applied to the tooltip label. Keep contrast at 4.5:1 or better for readability.

  3. 3

    Copy the CSS

    Paste the generated block into your stylesheet. It provides `.tooltip`, `.tooltip::after` and a `:hover` rule.

  4. 4

    Mark up the trigger

    Add `class="tooltip" data-tooltip="Your text"` to any element. The `::after` reads the attribute via `content: attr(data-tooltip)`.

Pure CSS tooltips: what you gain and what you give up

A CSS-only tooltip is small, fast and survives with JavaScript disabled. It does, however, live inside the source order of the DOM and therefore inherits some constraints you need to design around.

What the generated CSS does

  • Sets the trigger to position: relative so the absolute tooltip is anchored to it.
  • Pulls the label from content: attr(data-tooltip), which means you never duplicate the text.
  • Animates opacity with transition: opacity 0.15s, so the appearance feels quick but not abrupt.
  • Uses pointer-events: none on the bubble so it never blocks clicks on the trigger.

Positioning math

Position Offset rule
top bottom: calc(100% + 8px); left: 50%; translateX(-50%)
bottom top: calc(100% + 8px); left: 50%; translateX(-50%)
left right: calc(100% + 8px); top: 50%; translateY(-50%)
right left: calc(100% + 8px); top: 50%; translateY(-50%)

Accessibility caveats

  • data-tooltip is not read by screen readers. If the information is essential, pair it with aria-label or visible text.
  • Keyboard users need :focus-visible as well as :hover. Extend the generated rule to .tooltip:hover::after, .tooltip:focus-visible::after { opacity: 1; }.
  • Tooltips clipped by overflow: hidden on an ancestor will disappear. Move the trigger out of the clipping container or switch to a JS-rendered popover for dense UIs.

Frequently Asked Questions

A pseudo-element keeps the DOM clean, avoids duplicating the label text, and lets you style the tooltip without worrying about accidentally matching other elements. The cost is that ::after content cannot be indexed by assistive tech, so reinforce critical text with aria-label.

Yes, add a second pseudo-element, for example .tooltip::before, shaped with a zero-width/height box and colored borders. It is a classic CSS triangle trick; the sibling CSS Triangle Generator in this suite produces the exact border declarations you need.

Add transition-delay: 0.3s to the ::after rule but reset it to zero on hover-out, or use transition: opacity 0.15s 0.3s; to delay appearance without delaying dismissal.

The position and colors you pick are sent to our server to build the CSS, but they are not stored or reused. In the multi-step view they travel in the page link between steps; on the single-page view nothing is kept.

Related Tools

ASCII Table Reference

Full ASCII table from 0 to 127 with decimal, hex, octal, binary, standard names and HTML numeric-reference notation, including NUL, LF and DEL.

Color Palette Generator

Generate monochromatic, analogous, complementary, triadic or tetradic color palettes from a base HEX color and export copy-ready CSS variables.

HEX Color Picker

Pick or enter a HEX colour and get RGB, HSL, approximate CMYK, relative luminance and contrast ratios against white and black.

HTML Character Reference

Searchable list of HTML entities, their named and numeric codes, and a one-click copy for special characters and symbols.

JSON Formatter

Paste JSON to pretty-print with 2 or 4 spaces, minify it to compact output, or run a quick syntax check before copying the result.

Phone Validator

Validate phone numbers by country, detect the region and type, and normalize valid numbers to E.164, international, national and RFC 3966 formats.

Tool available in other languages