Tooltip

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

Pin to favorites

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

Import & use
import { Tooltip1 } from "@/components/beste/piece/tooltip1";

<Tooltip1
  label="Pin to favorites"
  direction="top"
/>

More Tooltip pieces

View all Tooltip
Duplicate row⌘D

Shortcut Tooltip

tooltip2

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

tooltip4

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

Mar 14, 2026
12,480+8.2%
Active users

Data Point Tooltip

tooltip6

Chart hover tooltip with date, headline value, trend pill, and a secondary metric label.

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

Image Preview

tooltip10

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

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.

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.