CSS tooltip. Hover messages, no JS.
💭 Preview (hover over it)

How to use

  1. Enter tooltip + trigger text.
  2. Pick position (top / bottom / left / right).
  3. Set color, radius, arrow size.
  4. Pick animation (fade / scale / slide).
  5. Copy HTML+CSS into your project.

Key features

  • 4 positions
  • Auto-arrow (CSS triangle)
  • 4 animations
  • Pure CSS :hover
  • data-tooltip attribute (reusable)

Use cases

  • Icon-button labels — hover small icons
  • Abbreviation expansion — "API" → "Application Programming Interface"
  • Form-field help — "password 8+ chars"
  • Disabled buttons — "permission required"
  • Chart data points — value display

Why CSS tooltips?

(1) No JS — fast, light, safe. (2) data-tooltip attribute for anywhere. (3) ::before + ::after bubble + arrow combined. (4) Universal browser support (IE 9+). Note: no hover on mobile — add :focus / :active or a JS lib.

FAQ

Mobile?

No hover on touch. Add :focus or use Tippy.js etc.

Long text?

Under 40 chars reads well. Longer = modal.

React?

Use className; data-tooltip via props.

Accessibility?

Add `aria-describedby` + hidden element for real a11y. This is visual-only.

Free?

Yes.