Image Preview

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

2560 × 1440

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

Import & use

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

<Tooltip10
  title="hero-dashboard-dark.png"
  subtitle="Uploaded by Mira · 2 days ago"
  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="violet"
/>

More Tooltip pieces

View all Tooltip

Churn rate

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

Glossary Tooltip

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

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

Info Tooltip

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

Pin to favorites

Tooltip

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

Duplicate row⌘D

Shortcut Tooltip

Dark tooltip that pairs a short label with inline kbd keys for the matching shortcut.

Try the new AI rewrite

Polish any paragraph in one click. Available in the editor.

Action Tooltip

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

Noor AhmedStaff engineer · PlatformOnline

User Hover Card

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