Home/Tools/Components/Tooltip Generator

Components · Generator

Tooltip Generator

Generate customizable tooltips with various positions and animations.

Tooltip Settings

Tooltip Text

Position

Background Color

Text Color

Show Delay0s

Show Arrow

Preview

Generated CSS & HTML

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

.tooltip {
  position: absolute;
  background: #1f2937;
  color: #ffffff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  white-space: nowrap;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  pointer-events: none;
}

.tooltip-container:hover .tooltip {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.tooltip::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 6px solid transparent;
}
.tooltip {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 10px;
}
.tooltip::after {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-top-color: #1f2937;
}

100%

Free, no
sign-up needed

Code written
by hand

85+

CSS tools
in one place

<1s

Copy-ready
CSS instantly

What is this

What is the CSS Tooltip Generator?

Generate pure CSS tooltips with configurable position, arrow, and animation. No JavaScript, no dependencies.

Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.

How to use

Using the CSS Tooltip Generator

Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.

Choose tooltip position

Select top, bottom, left, or right. The generator calculates the correct absolute positioning and arrow direction for each.

Set delay and animation

Add a short transition-delay (100-200ms) to prevent tooltips from flashing during mouse movement.

Copy the CSS

Click Copy and add data-tooltip="your text" to any HTML element to activate the tooltip.

The output

What the generated code looks like

Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.

tooltip.css

[data-tooltip] {
  position: relative;
}

[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #1d1d1f;
  color: #fff;
  font-size: 0.75rem;
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}

[data-tooltip]:hover::before {
  opacity: 1;
}

The data-tooltip attribute approach means you add tooltip text directly in HTML without extra markup. content: attr(data-tooltip) reads the attribute value.

Common mistakes & fixes

Common mistakes & how to fix them

A few habits trip people up. Here is what to watch for — and the exact fix.

Tooltip hidden by overflow:hidden parent

If any ancestor has overflow: hidden, the absolutely positioned tooltip clips at that boundary.

Fix: Set overflow: visible on ancestors in the tooltip chain, or use a JavaScript tooltip library that appends to document.body.

Tooltip text unreadable on mobile

CSS :hover does not fire reliably on touch screens. Tooltips are invisible to touch users.

Fix: Use CSS tooltips for supplementary information only. For required information, display it inline or use a click-activated popover.

Pro tips

Pro tips for better results

★

Use pointer-events: none on the tooltip

Without pointer-events: none, the tooltip itself can trigger mouse events, creating a hover flicker loop. Always add this to tooltip pseudo-elements.

★

Clip long tooltip text with max-width

Long attribute values will create very wide tooltips. Add max-width: 200px and white-space: normal to wrap long tooltip text.

FAQ

Frequently asked questions

Replace white-space: nowrap with white-space: normal and add max-width: 200px. The tooltip will wrap at 200px width. Line breaks in the attribute value are ignored by CSS content.

No. content: attr() reads plain text only. HTML tags are rendered as literal text. Use JavaScript-based tooltips if you need formatted tooltip content.