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"
/>

More Tooltip pieces

View all Tooltip
Monthly recurring revenueSum of normalized subscriptions divided by months, excluding one-time charges.

Info Tooltip

tooltip3

Card-style help tooltip with an info icon, bolded title, and supporting copy beneath.

hero-dashboard-dark preview2560 × 1440
hero-dashboard-dark.pngUploaded by Mira · 2 days ago

Image Preview

tooltip10

Thumbnail-first tooltip showing a gradient preview, dimensions chip, filename, and author.

Try the new AI rewrite
Polish any paragraph in one click. Available in the editor.

Action Tooltip

tooltip4

Dark rich tooltip carrying a headline, supporting blurb, and an inline action link.

Sunset#F97066

Swatch Tooltip

tooltip8

Color-swatch popover pairing a filled chip with the palette name and hex code.

Pin to favorites

Tooltip

tooltip1

Dark tooltip bubble with a small triangular arrow. Direction points the tail up or down.

Churn rate
Percentage of customers who cancel during a period, divided by customers at the start of that period.Glossary · Metrics

Glossary Tooltip

tooltip11

Definition popover with a book icon, term headline, explanation, and source footer.