BYTETOOLS

CSS Tooltip Generator

Build pure-CSS hover tooltips with position, background, text color, radius and custom text. Live hover preview and copy-ready tooltip CSS with an arrow.

Hover me

Tooltip settings

6

CSS

.tooltip {
  position: relative;
  display: inline-block;
}
.tooltip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 8px;
  background: #18181b;
  color: #ffffff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
}
.tooltip::before {
  content: "";
  position: absolute;
  border: 6px solid transparent;
  bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: -4px; border-top-color: #18181b;
  opacity: 0;
  transition: opacity 150ms ease;
}
.tooltip:hover::after,
.tooltip:hover::before {
  opacity: 1;
}

HTML: <span class="tooltip" data-tip="Hello there!">Hover me</span>

What is the CSS Tooltip Generator?

The CSS Tooltip Generator creates hover tooltips without JavaScript. Choose which side the tooltip appears on — top, right, bottom or left — set the background and text color, corner radius and the tooltip text, then hover the live preview to see it pop up complete with a pointer arrow.

  • Four positions with a matching arrow
  • Background, text color and radius controls
  • Custom tooltip text
  • Pure CSS — no JavaScript required
  • Live hover preview
  • Copy-ready tooltip CSS

How to use the CSS Tooltip Generator

  1. 1

    Choose the tooltip position: top, right, bottom or left.

  2. 2

    Set the background color, text color and corner radius.

  3. 3

    Type the tooltip text and hover the preview to test it.

  4. 4

    Copy the generated CSS and apply the class to your element.

About the CSS Tooltip Generator

The CSS Tooltip Generator creates hover tooltips without JavaScript. Choose which side the tooltip appears on — top, right, bottom or left — set the background and text color, corner radius and the tooltip text, then hover the live preview to see it pop up complete with a pointer arrow.

It is ideal for icon buttons, form hints and abbreviations where a lightweight, dependency-free tooltip is all you need. The output uses a data attribute and pseudo-elements, so you attach it with a single class and a title-style attribute.

All code is generated locally in your browser — free, private and offline-ready.

Frequently asked questions

How do you make a tooltip with only CSS?

Store the tooltip text in a data attribute, then reveal a ::after pseudo-element containing that text on :hover, positioned absolutely near the element. A small ::before triangle forms the arrow. No JavaScript is needed.

How do I position a CSS tooltip above an element?

Absolutely position the pseudo-element with bottom: 100% and center it horizontally with left: 50% and translateX(-50%). This tool sets those values for you based on the position you pick.

Are pure-CSS tooltips accessible?

They show on hover but not on keyboard focus by default, and screen readers may not announce data attributes. For full accessibility, add :focus support and an aria-label or a real title attribute alongside the CSS tooltip.

How do I add an arrow to a CSS tooltip?

Use a second pseudo-element as a border-trick triangle pointing from the tooltip toward the element. The generated CSS includes the arrow automatically, matched to the tooltip's background color and position.

Can the tooltip text wrap to multiple lines?

By default tooltips use white-space: nowrap to stay on one line. Remove that and set a max-width if you need multi-line tooltips for longer hints; the copied CSS is easy to adjust.

Guides for CSS Tooltip Generator

Related tools