CSS Tooltip Generator

Generate pure CSS tooltips with live preview — position, colors, arrow size, and radius.

Position: TOPBg Color: #1e293bText Color: #f8fafcArrow: 6pxRadius: 6pxFont Size: 13px

Tooltip Style Presets

Position

Background Color

Text Color

Arrow size: 6px

Border radius: 6px

Font size: 13px

Live Preview (Hover the Box)

CSS Rules

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

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

.tooltip::after {
  content: "";
  position: absolute;
  border-style: solid;
  border-width: 6px;
}

.tooltip::after {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-color: #1e293b transparent transparent transparent;
}

.tooltip-wrapper:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

HTML Markup

<div class="tooltip-wrapper">
  Hover over me
  <span class="tooltip">I'm a tooltip!</span>
</div>

How pure CSS tooltips work

The tooltip uses a ::after pseudo-element to draw a CSS triangle (by setting three transparent borders and one colored border). The tooltip text is absolutely positioned relative to its wrapper, hidden by default, and revealed on:hover via opacity and visibility transitions. No JavaScript is required.

For more complex animations, try the CSS Animation Generator. For button styling, see CSS Button Generator.

Built and maintained by Meet Shah · Last updated 19 July 2026

What this tool is used for

Producing a pure-CSS tooltip without a library.
Getting the arrow and position combination right with a preview.
Matching a tooltip's styling to a design.
Producing a starting style you then make accessible.
Comparing tooltip positions for a cramped layout.

Frequently Asked Questions

Why is a CSS-only tooltip an accessibility problem?: Because a `:hover`-driven tooltip is unreachable by keyboard and by touch. Adding `:focus-within` covers keyboard; touch has no hover state at all, so a tooltip carrying essential information is invisible to a large share of users.
What does WCAG require of a hover tooltip?: Success criterion 1.4.13: the content must be dismissible without moving the pointer, hoverable so it can be read without disappearing, and persistent until dismissed or invalid. A tooltip that vanishes when you move toward it fails all three.
How should the tooltip be associated with its trigger?: `aria-describedby` pointing at the tooltip's id, which is what makes a screen reader announce it after the control's name. `title` is the built-in alternative and is unreliable — inconsistent timing, no styling, and often not announced at all.
Why does my tooltip get clipped?: An ancestor with `overflow: hidden`, or a stacking context that traps it. That is what the Popover API and CSS anchor positioning were introduced to solve — they render in the top layer, escaping both problems without a portal.
Should a tooltip carry essential information?: No. If the content is required to complete a task, it belongs in visible text — a tooltip is a progressive enhancement for supplementary detail. The rule of thumb is that hiding it should cost clarity, not correctness.

Common errors and gotchas

Building a tooltip that only appears on hover, which keyboard and touch users never see.
Putting essential information in a tooltip, which should be visible in the interface.
Omitting `aria-describedby`, so the tooltip's content is invisible to a screen reader.
Positioning the tooltip so it is clipped by a parent's overflow.
Using the `title` attribute as a fallback, whose timing and styling you cannot control.