Should a tooltip contain buttons or links?

No. A tooltip is descriptive, not interactive. If the surface contains actions, use a popover, menu, dialog, or disclosure pattern instead.

Is hover enough for accessibility?

No. Reveal the tooltip on keyboard focus as well, usually with :focus-within on the trigger wrapper, and connect the trigger to the tooltip with aria-describedby.

How should tooltips work on touch screens?

Do not hide critical information in hover-only UI. For touch, prefer always-visible helper text, a tap-triggered popover, or an explicit info button that can be dismissed.

Why animate transform instead of top or bottom?

Top, bottom, and margin change layout-position values. Transform moves the painted tooltip from a stable anchor and is easier to compose with opacity.

Can I use CSS Anchor Positioning for tooltips?

CSS Anchor Positioning is useful but still needs browser-support planning. Keep an absolute-position fallback, and test collision handling near viewport edges.

← Back to gallery

Animated Tooltips

Three opinionated tooltip animations — a frosted-glass command-palette tip with a purple-pink-blue gradient halo + ⌘K keycap (spring scale-in), a rich profile-preview card that unfurls on @-mention hover with a pulsing online dot and italic stats (-1.8° rotate-in), and an editorial marginalia footnote that draws a dotted connector down to a tilted parchment aside with an asterism ornament. Each one uses :hover + :focus-within so keyboard users get the same affordance.

tooltippopoverspringfrosted-glassmarginaliafocus-withinprefers-reduced-motion

hover trigger

A dark frosted-glass tooltip framed by a soft purple-pink-blue gradient halo. Pops up with a tiny spring bounce and an embedded ⌘K keycap chip — the kind of tooltip that lives in modern command palettes and design tools.

Helped you ship something? 🐟 Send my cat a churu

/* Frosted-glass tooltip with a gradient halo border and an embedded keycap; spring scale-in on :hover. */
.t-wrap { position: relative; display: inline-block; }

.t-tip {
  position: absolute;
  bottom: calc(100% + 16px);
  left: 50%;
  /* Spring overshoot via cubic-bezier with Y > 1 */
  transform: translateX(-50%) translateY(10px) scale(0.92);
  opacity: 0;
  pointer-events: none;
  transition: all 0.36s cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Gradient halo border via padding + nested inner */
  background: linear-gradient(135deg,
    rgba(167, 139, 250, 0.9) 0%,
    rgba(244, 114, 182, 0.75) 50%,
    rgba(96, 165, 250, 0.9) 100%);
  padding: 1.5px;
  border-radius: 11px;
  filter: drop-shadow(0 18px 36px rgba(80, 40, 120, 0.4));
}

.t-tip-inner {
  background: rgba(15, 14, 22, 0.96);
  backdrop-filter: blur(18px);
  border-radius: 9.5px;
  padding: 11px 14px;
  color: rgba(255, 255, 255, 0.96);
}

.t-wrap:hover .t-tip,
.t-wrap:focus-within .t-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

How to make this

An accessible animated tooltip keeps the trigger focusable, connects it with aria-describedby, reveals the tooltip on hover and focus-within, and animates opacity plus transform instead of layout position.

1<span class="tooltip-study">2  <button id="export-trigger" type="button" aria-describedby="export-tip">3    Export4  </button>5  <span id="export-tip" class="tooltip-study__tip" role="tooltip">6    Saves a transparent PNG7  </span>8</span>9 10<style>11.tooltip-study {12  position: relative;13  display: inline-grid;14  place-items: center;15}16.tooltip-study button {17  border: 0;18  border-radius: 999px;19  padding: .65rem 1rem;20  color: #f8fafc;21  background: #1e293b;22  font: 700 .9rem/1 ui-sans-serif, system-ui;23}24.tooltip-study__tip {25  position: absolute;26  inset-inline-start: 50%;27  inset-block-end: calc(100% + .7rem);28  max-inline-size: 15rem;29  padding: .5rem .65rem;30  border-radius: 8px;31  color: #0f172a;32  background: #bae6fd;33  box-shadow: 0 14px 30px rgba(15, 23, 42, .2);34  opacity: 0;35  pointer-events: none;36  transform: translate(-50%, .45rem) scale(.96);37  transform-origin: 50% 100%;38  transition:39    opacity .18s ease,40    transform .22s cubic-bezier(.2,.8,.2,1);41}42.tooltip-study:hover .tooltip-study__tip,43.tooltip-study:focus-within .tooltip-study__tip {44  opacity: 1;45  transform: translate(-50%, 0) scale(1);46}47@media (prefers-reduced-motion: reduce) {48  .tooltip-study__tip { transition: none; transform: translate(-50%, 0); }49}50</style>

Annotated snippet

Line 1The wrapper is the positioning context and hover/focus scope. Keep the trigger and tooltip as siblings so :focus-within can reveal the tip for keyboard users.
PitfallIs hover enough for accessibility?
No. Reveal the tooltip on keyboard focus as well, usually with :focus-within on the trigger wrapper, and connect the trigger to the tooltip with aria-describedby.
Line 2aria-describedby connects the trigger to the tooltip text. The button remains the interactive element; the tooltip only describes it.
PitfallShould a tooltip contain buttons or links?
No. A tooltip is descriptive, not interactive. If the surface contains actions, use a popover, menu, dialog, or disclosure pattern instead.
Line 5role="tooltip" belongs on the descriptive bubble. It should appear near the trigger and should not contain focusable controls.
PitfallShould a tooltip contain buttons or links?
No. A tooltip is descriptive, not interactive. If the surface contains actions, use a popover, menu, dialog, or disclosure pattern instead.
Line 25Absolute positioning places the bubble without changing surrounding layout. The inline start plus translate pair centers it over the trigger.
Watch the "Save as draft" line below the trigger. When the tooltip appears, an in-flow bubble shoves the surrounding layout; an absolute bubble lifts out of flow so neighbours stay put.
PitfallWhy animate transform instead of top or bottom?
Top, bottom, and margin change layout-position values. Transform moves the painted tooltip from a stable anchor and is easier to compose with opacity.
Line 38Animate transform and opacity, not top, bottom, or margin. The tooltip can move visually without forcing layout.
Both bubbles bob up the same 12px. The margin keyframe shifts the bubble inside the flex column, so the button and "Save as draft" below jolt with it; transform paints the same motion without touching the layout.
PitfallWhy animate transform instead of top or bottom?
Top, bottom, and margin change layout-position values. Transform moves the painted tooltip from a stable anchor and is easier to compose with opacity.
Line 42Use both hover and focus-within. A hover-only tooltip disappears for keyboard users and often fails automated accessibility checks.
PitfallIs hover enough for accessibility?
No. Reveal the tooltip on keyboard focus as well, usually with :focus-within on the trigger wrapper, and connect the trigger to the tooltip with aria-describedby.
Line 47Reduced motion keeps the tooltip available but removes the slide and scale. The description still appears instantly.

Other pitfalls

How should tooltips work on touch screens?: Do not hide critical information in hover-only UI. For touch, prefer always-visible helper text, a tap-triggered popover, or an explicit info button that can be dismissed.
Can I use CSS Anchor Positioning for tooltips?: CSS Anchor Positioning is useful but still needs browser-support planning. Keep an absolute-position fallback, and test collision handling near viewport edges.

Notes

Overview

Three tooltip studies showing different production registers: a frosted-glass command-palette tip with a gradient halo and embedded keycap (spring scale-in), a rich profile-preview card that unfurls on @-mention hover with avatar + stats (rotate-in landing), and an editorial marginalia footnote that draws a dotted connector down to a tilted parchment aside.

When to use it

Reach for tooltips for keyboard-shortcut hints, glossary terms, and inline disclosures of secondary info. Skip them for critical content (use inline text instead) and for any interaction that needs user action inside the tooltip itself — tooltips close on focus loss, which traps modal actions.

How it works

Each tooltip sits absolutely positioned next to its trigger inside a relatively-positioned wrapper. CSS :hover + :focus-within on the wrapper toggle opacity + transform on the tooltip. The frosted study layers a backdrop-filter: blur(12px) + a soft gradient halo behind the tip; the profile card uses perspective(800px) rotateX(8deg) + a slight translateY for the unfurl-in landing; the editorial study draws an SVG dashed connector via stroke-dashoffset animation paired with the body fade-in. For positioning collisions with viewport edges, drive the placement with a JS measure-and-shift pass on mouseenter — pure CSS cannot detect edge overflow.

Production gotchas

Tooltips that close on focus loss are the right pattern for transient hints but the wrong pattern for any tooltip that contains interactive content (links inside the tip). Use aria-haspopup + a popover instead when users need to click inside. Tooltips clipped by overflow: hidden on an ancestor look broken — either move the tooltip to a portal at the body root or use the new popover="auto" attribute which renders in the top layer above all overflow constraints.

Accessibility

Tooltips need role="tooltip" + aria-describedby on the trigger pointing to the tooltip ID so screen-reader users hear the helper text after the control name. Hover-only tooltips are inaccessible to keyboard users; always include :focus-within as a trigger. Under prefers-reduced-motion: reduce drop the unfurl/spring transforms and use a flat opacity fade.

References

Implementation depth

Tooltips are support text, not required content. Use focus and hover to reveal them, keep the trigger label meaningful on its own, and avoid making the animation the only way to discover important information.

Positioning is the fragile part. Long strings, viewport edges, and touch input can all break a pretty tooltip. Test focus-within, Escape behavior where applicable, and reduced motion with the tooltip already visible.

Animated Tooltips