Swatch Tooltip

Color-swatch popover pairing a filled chip with the palette name and hex code.

Sunset#F97066

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

Import & use

import { Tooltip8 } from "@/components/beste/piece/tooltip8";

<Tooltip8
  name="Sunset"
  hex="#F97066"
  tone="sunset"
/>

More Tooltip pieces

Churn rate

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

tooltip11

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

Duplicate row⌘D

tooltip2

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

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

tooltip3

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

Step 2 of 4

Pin your favorite workspacesDrag any workspace into the sidebar rail to keep it one click away.

tooltip7

Coach-mark popover with step counter, dismiss ×, progress dots, and a next button.

Copied!

tooltip9

Green success tooltip with a check mark, used for copy-to-clipboard confirmation.

2560 × 1440

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

tooltip10

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