--- /** * AnimatedTooltip — a row of overlapping circular avatars. Hovering one * scales it up and pops a name/designation tooltip above it with a springy * entrance. As the pointer crosses the avatar, the tooltip tilts and shifts * sideways to follow it. A custom element does the pointer math (no * animation library): it writes the tilt and horizontal shift into CSS * custom properties consumed by a plain `transform`, while the pop-in * itself is a CSS transition with a bouncy easing curve on a nested * element — position/follow and springy reveal are two separate * transitions on two separate elements, so each keeps its own easing. */ interface TooltipItem { /** Unique key; also used to build the tooltip's element id. */ id: number | string; /** Person's name, shown bold inside the tooltip. */ name: string; /** Role or title, shown under the name inside the tooltip. */ designation: string; /** Avatar image URL. */ image: string; } interface Props { /** Avatars rendered left to right, each overlapping the previous one. */ items: TooltipItem[]; /** Additional classes for the root element. */ class?: string; } const { items, class: className } = Astro.props; --- { items.map((item) => ( )) }

Installation

Install dependencies

Add these files

Configuration

Use it