User Hover Card

Avatar hover tooltip showing name, role, and a presence dot with its state beneath.

Noor Ahmed
Noor AhmedStaff engineer · PlatformOnline

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use
import { Tooltip5 } from "@/components/beste/piece/tooltip5";

<Tooltip5
  name="Noor Ahmed"
  role="Staff engineer · Platform"
  initials="NA"
  presence="online"
  imageSrc="https://images.unsplash.com/photo-1733421331070-59ce0b57917a?w=100&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDd8fHxlbnwwfHx8fHw%3D"
  alt="Noor Ahmed"
  tone="violet"
/>