Does this CSS tooltip require JavaScript?

No — the generated tooltip is 100% pure CSS using the :hover pseudo-class. No JavaScript, no frameworks, no dependencies needed.

Are the generated CSS tooltips accessible?

The generator produces a tooltip pattern that works well for sighted users. For full accessibility, add role="tooltip" and aria-describedby attributes to your HTML, which the generated HTML snippet includes.

Do CSS-only tooltips work on mobile / touch devices?

CSS :hover tooltips are designed for cursor-based interactions. On touch-only devices they won't trigger unless the element is also focusable. For mobile support consider adding JavaScript to toggle a class on tap.

How do I change the tooltip text?

Simply update the text content inside the element in the copied HTML. The CSS doesn't need to change — the tooltip automatically wraps to the max-width you set.

Can I use multiple tooltips on the same page?

Yes. The generated CSS uses classes (.tooltip-wrapper, .tooltip) so any number of tooltip instances on the same page will all pick up the same styles automatically.

Pure CSS — No JavaScript Required

Build Beautiful CSS Tooltips
in Seconds

Customise position, color, border radius, animation, and arrow. Get clean, copy-paste CSS + HTML instantly — works in every browser.

🎨

Fully Customisable

Control position, colors, padding, border radius, font size, and arrow size with live preview.

⚡

Zero JavaScript

Pure CSS :hover magic — no libraries, no runtime overhead, no dependencies whatsoever.

📋

Copy-Paste Ready

One click copies the generated CSS and HTML. Drop it straight into your project and you're done.

Configuration

Tooltip Text

Trigger Text

Position

Animation

Background

#1e293b

Text Color

#f8fafc

Show Arrow

Border Radius6px

Font Size13px

Padding (vertical)6px

Padding (horizontal)12px

Max Width220px

Offset from trigger8px

Arrow Size6px

Live Preview

Hover the button to preview the tooltip

Generated Code

CSS

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

.tooltip {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  background-color: #1e293b;
  color: #f8fafc;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  max-width: 220px;
  white-space: nowrap;
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* Tooltip arrow */
.tooltip::after {
  content: '';
  position: absolute;
  bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-top-color: #1e293b;
    border-width: 6px 6px 0 6px;
  border-style: solid;
  border-color: transparent;
}
/* Reveal on hover */
.tooltip-wrapper:hover .tooltip,
.tooltip-wrapper:focus-within .tooltip {
  opacity: 1;
}

HTML

<div class="tooltip-wrapper">
  <button>Hover over me</button>
  <span class="tooltip" role="tooltip">This is a tooltip!</span>
</div>

Frequently Asked Questions

Everything you need to know about CSS Tooltip Generator.

Build Beautiful CSS Tooltipsin Seconds