Shortcut Tooltip

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

Duplicate row⌘D

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

Import & use

import { Tooltip2 } from "@/components/beste/piece/tooltip2";

<Tooltip2
  label="Duplicate row"
  keys={[
    "⌘",
    "D"
  ]}
/>

More Tooltip pieces

Pin to favorites

tooltip1

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

Try the new AI rewrite

Polish any paragraph in one click. Available in the editor.

tooltip4

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

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.

Sunset#F97066

tooltip8

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

2560 × 1440

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

tooltip10

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

Mar 14, 2026

12,480+8.2%

Active users

tooltip6

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