User Hover Card

About this piece

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

Usage

The import and the props worth knowing about, in one place.

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

<Tooltip5
  name="Hania Rani"
  role="Staff engineer"
  initials="HR"
  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="Hania Rani"
  tone="primary"
  bordered={false}
/>

More Tooltip pieces

View all Tooltip

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

2560 × 1440

hero-dashboard-dark.png

Sunset#F97066

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

Pin to favorites

Churn ratePercentage of customers who cancel during a period, divided by customers at the start of that period.