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