Social

Avatar stack — hover tooltips

Hover-spread avatar stack where each avatar shows a name tooltip on hover.

medium5 in Social

AvatarAvatarGroupTooltip

Demo

+1
---
import { Avatar, AvatarGroup, Tooltip } from "astro-ui";
---

<AvatarGroup hover>
  {[
    { name: "Ada Lovelace", img: "47" },
    { name: "Grace Hopper", img: "45" },
    { name: "Alan Turing", img: "12" },
    { name: "Edsger Dijkstra", img: "60" },
  ].map((a) => (
    <Tooltip ariaLabel={a.name} placement="top">
      <Fragment slot="content">{a.name}</Fragment>
      <Avatar name={a.name} src={"https://i.pravatar.cc/150?img=" + a.img} />
    </Tooltip>
  ))}
  <Fragment slot="count">+2</Fragment>
</AvatarGroup>

<style is:global>
  /* AvatarGroup hover spread is built into the component; tooltips show on hover. */
</style>

Zero new CSS — every element reads the library tokens. Switch to the Code tab and hit Copy for paste-ready source; form ids here are prefixed per instance so multiple copies can coexist on one page.