G4GAME/DevTools

CSS Tooltip Generator

Create lightweight tooltips that appear on hover and keyboard focus — no JavaScript. Choose placement, colors, radius and arrow.

Last updated: · Runs 100% in your browser

// controls
6px
13px
Live preview
Generated CSS
.has-tooltip {
  position: relative;
}

.has-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: #00ff66;
  color: #000000;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.has-tooltip::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 0px);
  left: 50%;
  transform: translateX(-50%);
  border-top-color: #00ff66;
  border: 5px solid transparent;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.has-tooltip:hover::after,
.has-tooltip:focus-visible::after,
.has-tooltip:hover::before,
.has-tooltip:focus-visible::before {
  opacity: 1;
}

// Example output

.has-tooltip {
  position: relative;
}

.has-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: #00ff66;
  color: #000000;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.has-tooltip::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 0px);
  left: 50%;
  transform: translateX(-50%);
  border-top-color: #00ff66;
  border: 5px solid transparent;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.has-tooltip:hover::after,
.has-tooltip:focus-visible::after,
.has-tooltip:hover::before,
.has-tooltip:focus-visible::before {
  opacity: 1;
}

// Features

  • ▸Top, bottom, left and right
  • ▸Optional arrow
  • ▸Hover and focus-visible
  • ▸Custom colors and radius
  • ▸Uses a data-tooltip attribute

// How to use

  1. 01Adjust the controls on the left or pick a preset to start the CSS Tooltip Generator.
  2. 02Watch the live preview update instantly as you change each setting.
  3. 03Fine-tune the generated CSS by hand in the code panel if you like.
  4. 04Click Copy CSS or Download CSS, or Share to send a link to your design.

// FAQ

Your data never leaves your browser. This tool runs 100% locally — no upload, no logging, no analytics on your inputs.

Sponsored · Recommended developer deals

// Related tools

CSS Triangle Generator
Draw pointing triangles and arrows in pure CSS using the border technique, in any direction and size.
CSS Badge Generator
Generate compact status badges and pill labels with custom colors, radius, casing and an optional status dot.
CSS Cursor Generator
Preview every built-in CSS cursor — pointer, grab, crosshair, text, not-allowed and more — and copy the rule.