Avatar group with hover tooltips and lift effect

<script setup lang="ts">
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"

const PIXEL =
  "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAUwAOw=="

const avatars = [
  { src: PIXEL, fallback: "DK", name: "David Kim" },
  { src: PIXEL, fallback: "ML", name: "Max Leiter" },
  { src: PIXEL, fallback: "ER", name: "James Brown" },
  { src: PIXEL, fallback: "JW", name: "Jenny Wilson" },
]
</script>

<template>
  <TooltipProvider>
    <div class="flex -space-x-2">
      <Tooltip v-for="(avatar, index) in avatars" :key="index">
        <TooltipTrigger>
          <Avatar class="ring-background ring-2 transition-all duration-300 ease-in-out hover:z-1 hover:-translate-y-1 hover:shadow-md">
            <AvatarImage :src="avatar.src" :alt="avatar.name" />
            <AvatarFallback class="text-xs">
              {{ avatar.fallback }}
            </AvatarFallback>
          </Avatar>
        </TooltipTrigger>
        <TooltipContent :side-offset="10">{{ avatar.name }}</TooltipContent>
      </Tooltip>
    </div>
  </TooltipProvider>
</template>