CSS Tooltip Generator

Create lightweight, pure CSS tooltips using data attributes with zero JavaScript dependencies.

Tooltip Content & Placement

Tooltip Text Content

Tooltip Direction (Position)

Appearance & Arrow Styling

Background

Text Color

Font Size (13px)

Radius (6px)

Arrow Pointer

Arrow Size (6px)

Animation

Live Hover Preview

/* Pure CSS Tooltip */
[data-tooltip] {
  position: relative;
  cursor: pointer;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) ;
  background: #14141a;
  color: #e4e1e9;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.2s;
  z-index: 1000;
}

[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
  
}
/* Arrow Pointer */
[data-tooltip]::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #14141a;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 999;
}

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

Mastering Pure CSS Tooltips & Micro-Contextual Popovers

Pure CSS Tooltip Architecture & Accessibility

Traditional tooltip plugins rely on heavy JavaScript packages (like Popper.js or Tippy.js), adding 10–30KB of JS bloat. A pure CSS tooltip uses [data-tooltip]::after with content: attr(data-tooltip) to render tooltips instantly with zero bundle size penalty.

Position	Transform CSS Offset	Arrow Pointer Alignment
Top	translateX(-50%) translateY(0)	Border bottom points downward toward trigger
Bottom	translateX(-50%) translateY(0)	Border top points upward toward trigger
Left	translateY(-50%) translateX(0)	Border right points rightward toward trigger
Right	translateY(-50%) translateX(0)	Border left points leftward toward trigger

Pairing Tooltips with Other CSS Generators

Enhance your UI buttons and status indicators by pairing tooltips with our CSS badge generator, add ribbons with our CSS ribbon generator, or animate elements with our CSS keyframe generator.