Data Point Tooltip

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

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

New here? Read the installation guide.

Import & use
import { Tooltip6 } from "@/components/beste/piece/tooltip6";

<Tooltip6
  date="Mar 14, 2026"
  label="Active users"
  value="12,480"
  change="+8.2%"
  trend="up"
/>

More Tooltip pieces

View all Tooltip
Pin to favorites

Tooltip

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

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.

Duplicate row⌘D

Shortcut Tooltip

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

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

Image Preview

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

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

Sunset#F97066

Swatch Tooltip

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

Markdown version