Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Tooltip examples · Content

Tooltip with Keyboard Shortcut for React

A Save button whose tooltip names the action and its ⌘S shortcut.

Framework
UI library

Keyboard shortcuts save time, but only for people who know them. This React example opens a Tooltip on a Save button that reads Save changes followed by a Kbd with ⌘S. Inside the tooltip the Kbd picks up colors that suit the tooltip's inverted background, so it needs no classes of its own. Use it on toolbar buttons, editor controls and search triggers, so people learn the shortcut while they hover.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How does the shortcut sit next to the label?

The tooltip is a row. The paragraph Save changes comes first, then a Kbd whose text is ⌘S. gap-2 is on TooltipContent.

Why doesn't the Kbd need its own classes?

Kbd has no className in this demo. Inside a tooltip, in-data-[slot=tooltip-content] switches it to text-background and a translucent bg-background, so the key stays readable on the inverted fill.

Does this tooltip register the ⌘S shortcut?

No. The Kbd only displays ⌘S. The demo does not listen for the keys, so the Save button still needs its own handler and the shortcut has to be wired up separately.

How do I show a different shortcut?

Change the text inside Kbd. This demo hardcodes ⌘S. A second shortcut is another Kbd in the same row.

Will a longer label wrap under the key?

The tooltip is w-fit up to max-w-xs. Save changes and ⌘S fit on one line at gap-2. A longer label wraps inside that width, with the Kbd staying in the row.

Do screen readers read the shortcut?

The paragraph and the Kbd text are the tooltip content, read when the Save button is focused. The button's visible name is still Save. Base UI does not link the tooltip to the trigger, so the button keeps the name Save on its own.

All 8 tooltip examples