AI CSS Tooltip Generator — Design Accessible Hover Tooltips Instantly

Published February 23, 2026 · 9 min read · Design

Tooltips are one of those UI elements that seem simple until you actually build one. Position it above a button, and it clips off the viewport. Add an arrow, and the math gets weird. Make it accessible, and suddenly you need ARIA attributes, keyboard support, and focus management. What starts as a quick CSS snippet turns into a surprisingly complex component.

An AI CSS tooltip generator handles all of this for you. Choose your position, style, animation, and arrow shape — then export clean, accessible CSS that works across browsers without JavaScript dependencies.

Pure CSS Tooltip Fundamentals

The simplest tooltip uses a data-tooltip attribute and a pseudo-element. No extra HTML elements, no JavaScript — just CSS:

.tooltip {
  position: relative;
  cursor: pointer;
}

.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 12px;
  background: #1a1a2e;
  color: #e2e2e8;
  border-radius: 6px;
  font-size: 0.85rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.tooltip:hover::after,
.tooltip:focus::after {
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
}

The attr() function pulls the tooltip text directly from the HTML attribute, keeping your markup clean. The pointer-events: none prevents the tooltip from interfering with mouse interactions, and the transition creates a smooth fade-in effect.

Adding the Arrow

A tooltip without an arrow feels disconnected from its trigger. The arrow is typically created with a ::before pseudo-element using the CSS border trick:

.tooltip::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #1a1a2e;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.tooltip:hover::before,
.tooltip:focus::before {
  opacity: 1;
}

The border trick creates a triangle by making three borders transparent and one colored. For a top-positioned tooltip, you color the top border. For bottom positioning, color the bottom border and flip the placement.

Positioning Strategies

Top-center is the default, but real-world layouts need all four directions. Here is a clean pattern using CSS custom properties for flexible positioning:

/* Top */
.tooltip-top::after {
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
}

/* Bottom */
.tooltip-bottom::after {
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
}

/* Left */
.tooltip-left::after {
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
}

/* Right */
.tooltip-right::after {
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
}

Each direction adjusts the offset axis and centering transform. The calc(100% + 8px) pattern creates consistent spacing between the trigger element and the tooltip bubble regardless of the trigger's size.

Pro tip: Use CSS custom properties to define tooltip spacing, colors, and border-radius as design tokens. This makes it trivial to maintain consistent tooltips across your entire application.

Animation Techniques

A simple opacity fade works, but adding a subtle directional slide makes tooltips feel more polished. The animation should hint at where the tooltip came from:

/* Slide up for top tooltips */
.tooltip-top::after {
  opacity: 0;
  transform: translateX(-50%) translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.tooltip-top:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Scale entrance for emphasis */
.tooltip-scale::after {
  opacity: 0;
  transform: translateX(-50%) scale(0.9);
  transition: opacity 0.15s ease, transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tooltip-scale:hover::after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

The cubic-bezier curve in the scale animation creates a slight overshoot — the tooltip grows slightly past its final size before settling back. This micro-interaction adds personality without being distracting. For more animation ideas, check out the AI CSS Animation Generator guide.

Delay for Better UX

Tooltips that appear instantly on hover can be annoying, especially in dense UIs where the cursor passes over many trigger elements. Adding a small delay prevents accidental triggers:

.tooltip::after {
  transition: opacity 0.2s ease 0.3s, transform 0.2s ease 0.3s;
}

.tooltip:hover::after {
  transition-delay: 0.3s;
}

A 200-300ms delay is the sweet spot. Long enough to prevent flicker when the cursor moves across the page, short enough that intentional hovers still feel responsive.

Accessibility Matters

CSS-only tooltips have a significant accessibility gap: screen readers cannot access pseudo-element content reliably. For truly accessible tooltips, you need proper ARIA attributes:

<button aria-describedby="save-tip">
  Save
  <span role="tooltip" id="save-tip" class="tooltip-content">
    Save your current progress (Ctrl+S)
  </span>
</button>

.tooltip-content {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 12px;
  background: #1a1a2e;
  color: #e2e2e8;
  border-radius: 6px;
  font-size: 0.85rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

button:hover .tooltip-content,
button:focus .tooltip-content {
  opacity: 1;
}

The role="tooltip" tells assistive technology what this element is. The aria-describedby links the trigger to the tooltip content. And the :focus selector ensures keyboard users can access the tooltip by tabbing to the button. For more on building accessible interfaces, see the color contrast accessibility guide.

Dark Mode and Theming

Tooltips need to adapt to your color scheme. Using CSS variables makes theming straightforward:

:root {
  --tooltip-bg: #1a1a2e;
  --tooltip-text: #e2e2e8;
  --tooltip-radius: 6px;
  --tooltip-padding: 8px 12px;
  --tooltip-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

@media (prefers-color-scheme: light) {
  :root {
    --tooltip-bg: #2d3436;
    --tooltip-text: #ffffff;
    --tooltip-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
}

.tooltip::after {
  background: var(--tooltip-bg);
  color: var(--tooltip-text);
  border-radius: var(--tooltip-radius);
  padding: var(--tooltip-padding);
  box-shadow: var(--tooltip-shadow);
}

Dark tooltips on light backgrounds and light tooltips on dark backgrounds both work — the key is maintaining sufficient contrast. Use the AI Color Contrast Checker to verify your tooltip colors meet WCAG standards.

Mobile Considerations

Hover does not exist on touch devices. This is the biggest challenge with tooltips. Here are practical solutions:

Use @media (hover: hover) to only show hover tooltips on devices that support it
On touch devices, show tooltip content inline or use a tap-to-reveal pattern
Consider replacing tooltips with visible labels on small screens
If you must use tooltips on mobile, trigger them on :focus with a tap interaction

@media (hover: hover) {
  .tooltip:hover::after {
    opacity: 1;
  }
}

@media (hover: none) {
  .tooltip:focus::after {
    opacity: 1;
  }
  .tooltip:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
}

This progressive enhancement approach ensures tooltips work everywhere without degrading the experience on any device.

Common Tooltip Mistakes

After building hundreds of tooltip implementations, these are the patterns that cause the most problems:

Putting essential information in tooltips — if users need it, show it directly
Tooltips on disabled buttons — users cannot hover or focus disabled elements
Long text in tooltips — keep them under 80 characters; use a popover for more
Missing pointer-events: none — tooltips that block clicks frustrate users
No z-index management — tooltips hidden behind other elements are useless
Forgetting overflow: hidden on parent containers clips tooltips unexpectedly

Build perfect tooltips in seconds

Choose position, style, animation, and colors — get clean, accessible CSS code instantly.

Try AI CSS Tooltip Generator →

Building a Complete Tooltip System

Tooltips are just one piece of your UI component library. Combine them with other CSS tools for a polished design system:

AI Box Shadow Generator for adding depth to tooltip containers
CSS Micro-Interactions for subtle entrance and exit animations
AI Glassmorphism Generator for frosted glass tooltip styles
AI Font Pairing for choosing the right tooltip typography
AI CSS Scrollbar Styler for styling scrollable tooltip content

The AI CSS Tooltip Generator lets you visually design tooltips with real-time preview. Pick your position, customize colors and animations, and export production-ready CSS that handles positioning, arrows, accessibility, and responsive behavior out of the box.