Component Deep Dive #18: Tooltip — Why Write 50 Lines of JS When One Line of CSS Works?

Tooltip — The Web's Smallest (and Most Misunderstood) Component

A button has an icon. The user doesn't know what it means. They hover — nothing. They click — the page navigates away. That's the cost of a missing tooltip: anxiety, misclicks, churn.

CSS-Only Wins

.tooltip::after {
  content: attr(data-tooltip);
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none; /* Critical: don't block clicks */
}
.tooltip:hover::after, .tooltip:focus-visible::after {
  opacity: 1;
}

For 90% of use cases, CSS ::after + attr() is simpler, faster, and more reliable than any JS library. Only reach for Popper.js when you need intelligent edge-flip positioning.

Accessibility

• Use :focus-visible alongside :hover for keyboard users
• Always add aria-label to the trigger element as fallback (screen readers may not announce CSS tooltips)
• Never use title attribute — it's invisible on mobile

👉 Full bundle ¥9.99: payhip.com/b/S9pj2