Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Tooltip with Keyboard Shortcut for React

An outline Save button. Its tooltip reads Save changes and shows a ⌘S key hint beside the words.

An outline button says Save. Its tooltip reads Save changes, with ⌘S in a key hint beside the words.

Name the action and its shortcut when the button only says Save. The hint does not press the keys. A Kbd in the button shows the shortcut without a tooltip. In React, Base UI does not listen for ⌘S.

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

Anatomy

Tooltip anatomy: content, positioner, arrow, trigger

Usage

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger render={<Button variant="outline" />}>
      Save
    </TooltipTrigger>
    <TooltipContent className="gap-2">
      <p>Save changes</p>
      <Kbd>⌘S</Kbd>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

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.

API Reference

Tooltip

No extra props in this demo. The rest is on the Tooltip page.

Button

Sets variant="outline". The rest is on the Button page.

Kbd

No extra props in this demo. The rest is on the Kbd page.

All 8 tooltip examples