How does the tooltip appear only on hover with pure CSS?

The tooltip text starts at `opacity: 0; pointer-events: none;`, and a `.tooltip:hover .tooltip-text` rule sets `opacity: 1`. No JavaScript is needed — the browser's :hover pseudo-class handles the show/hide entirely, and the opacity transition gives it a smooth fade.

Why does the tooltip element need position: relative on the wrapper?

The tooltip text is `position: absolute`, which positions it relative to the nearest positioned ancestor. Giving the wrapping `.tooltip` span `position: relative` makes it that ancestor, so the tooltip is placed relative to the trigger element rather than the whole page.

How is the little triangle arrow drawn?

It's a zero-size element (`content: ""`) with all four border widths set and only one border side given a color — the other three stay transparent. That combination of solid and transparent borders is what forms the triangle shape pointing at the trigger element.

Is a hover-only tooltip accessible to keyboard and touch users?

Not fully — hover doesn't fire on touch devices and keyboard users need :focus support too. Add a `.tooltip:focus-within .tooltip-text { opacity: 1; }` rule and make sure the trigger is focusable, and consider showing tooltip text as a `title` attribute or visible label as a fallback for touch.

Does this tool send my design anywhere?

No — everything runs locally in your browser. The CSS is generated in real time and nothing is uploaded to a server.

CSS TOOLTIP GENERATOR

Build a hover tooltip with an optional arrow, then copy the CSS and matching HTML.

Hover meTooltip text

Font size: 13px

Corner radius: 6px

Background

Text color

Show arrow

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltip-text {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #201d19;
  color: #f2e9dc;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 10;
}

.tooltip:hover .tooltip-text {
  opacity: 1;
}

.tooltip .tooltip-text::after {
  content: "";
  position: absolute;
  border-width: 5px;
  border-style: solid;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-color: #201d19 transparent transparent transparent;
}

How to build a CSS tooltip

1
Hover the preview button to see the tooltip appear.
2
Choose a position: top, bottom, left, or right.
3
Pick background and text colors, font size, and corner radius.
4
Toggle the pointer arrow, then copy the generated CSS and HTML.

Questions

How does the tooltip appear only on hover with pure CSS?: The tooltip text starts at `opacity: 0; pointer-events: none;`, and a `.tooltip:hover .tooltip-text` rule sets `opacity: 1`. No JavaScript is needed — the browser's :hover pseudo-class handles the show/hide entirely, and the opacity transition gives it a smooth fade.
Why does the tooltip element need position: relative on the wrapper?: The tooltip text is `position: absolute`, which positions it relative to the nearest positioned ancestor. Giving the wrapping `.tooltip` span `position: relative` makes it that ancestor, so the tooltip is placed relative to the trigger element rather than the whole page.
How is the little triangle arrow drawn?: It's a zero-size element (`content: ""`) with all four border widths set and only one border side given a color — the other three stay transparent. That combination of solid and transparent borders is what forms the triangle shape pointing at the trigger element.
Is a hover-only tooltip accessible to keyboard and touch users?: Not fully — hover doesn't fire on touch devices and keyboard users need :focus support too. Add a `.tooltip:focus-within .tooltip-text { opacity: 1; }` rule and make sure the trigger is focusable, and consider showing tooltip text as a `title` attribute or visible label as a fallback for touch.
Does this tool send my design anywhere?: No — everything runs locally in your browser. The CSS is generated in real time and nothing is uploaded to a server.