Image Preview

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

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

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

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

tooltip11

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

tooltip3

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

Duplicate row⌘D

Shortcut Tooltip

tooltip2

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

Pin to favorites

Tooltip

tooltip1

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

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.

Noor Ahmed
Noor AhmedStaff engineer · PlatformOnline

User Hover Card

tooltip5

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