Onboarding Step

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

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

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

Import & use
import { Tooltip7 } from "@/components/beste/piece/tooltip7";

<Tooltip7
  step={2}
  total={4}
  title="Pin your favorite workspaces"
  description="Drag any workspace into the sidebar rail to keep it one click away."
  nextLabel="Next"
  tone="primary"
/>

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.

Sunset#F97066

Swatch Tooltip

tooltip8

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

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.

Copied!

Copied Confirmation

tooltip9

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

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.

Noor Ahmed
Noor AhmedStaff engineer · PlatformOnline

User Hover Card

tooltip5

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