Image Preview

About this piece

Thumbnail-first tooltip showing an image preview, a dimensions chip, and the filename.

Usage

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

import { Tooltip10 } from "@/components/beste/piece/tooltip10";

<Tooltip10
  surface="card"
  bordered={false}
  inverted={false}
  title="hero-dashboard-dark.png"
  dimensions="2560 × 1440"
  imageSrc="https://images.unsplash.com/photo-1686172932808-870de06c5b8a?q=80&w=300&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
  alt="hero-dashboard-dark preview"
  tone="primary"
/>

More Tooltip pieces

View all Tooltip

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

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

Hania RaniStaff engineerOnline

Pin to favorites

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

Duplicate row⌘D