← Back to gallery
CSS

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-glassmarginalia

Three whispers · hover/focus tooltip atelier

Animated Tooltips

Three opinionated tooltip studies — Aurora Glass (a frosted-glass command-palette tip with a purple-pink-blue gradient halo and an embedded keycap, spring scale-in), Profile Preview (a rich social-mention card that unfurls on hover with avatar, pulsing dot, italic stats, and a -1.8° rotate-in landing), and Editorial Marginalia (a pencilled footnote that draws a dotted connector down to a tilted parchment aside with an asterism ornament). Each tooltip uses :hover + :focus-within so keyboard users get the same affordance.

Crystalline · gradient halo + keycap

Aurora Glass

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.

  • backdrop-filter blur
  • gradient halo border
  • spring scale-in
  • embedded keycap

Convivial · rich mention card

Profile Preview

A mini profile that unfurls when you hover an @-mention in running text. Avatar with a pulsing online dot, italic stats grid, layered drop shadow, and a slight -1.8° rotation as the card lands — the unhurried social-interface gesture.

  • avatar pulsing dot
  • -1.8° rotate-in
  • italic stat grid
  • layered drop-shadow

Marginalia · footnote in the margin

Editorial Marginalia

A footnote pencilled in the margin of an old book. The dotted connector draws downward, parchment paper unfolds, italic serif body lands at a slight tilt. An asterism (✻) sits at the corner like a librarian's mark.

  • dotted connector draws
  • parchment gradient
  • -0.8° hand tilt
  • asterism ornament

Tooltip inspector

Aurora Glass

Aurora · ⌘K
Search anywhere⌘ K
  • backdrop-filter blur
  • gradient halo border
  • spring scale-in
  • embedded keycap

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.

/* 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);
}