A clean avatar stack with simple hover effects and smooth tooltip transitions.
Whiskers
Hover over avatars to see their names with smooth tooltip transitions
About this component
A clean avatar stack that elegantly displays multiple user profiles in a
compact, overlapping arrangement. Hover interactions reveal individual
identities through smooth tooltip transitions, while the stacking logic
maintains visual hierarchy — presenting collaborative or social
information without overwhelming the interface.
Implementation highlights
Negative margin stacking with z-index management for proper layering
Shared tooltip component that smoothly follows hover position
CSS transforms for lift and scale effects on individual avatars
Brightness dimming on siblings to highlight the hovered avatar
Vanilla JavaScript for lightweight tooltip positioning logic
When to use
Team member displays in project cards or headers
User lists showing who's online or active in a space
Collaboration indicators showing document or file contributors
Social proof elements showing recent activity or engagement
