Skip to content

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

Free

Tooltip with Keyboard Shortcut for Vue

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

UI library: Ark UI

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 Vue, Ark UI does not listen for ⌘S.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Tooltip anatomy: content, positioner, arrow, trigger

Usage

<Tooltip>
  <TooltipTrigger :asChild="true">
    <Button variant="outline">Save</Button>
  </TooltipTrigger>
  <TooltipContent class="gap-2"><p>Save changes</p><Kbd>⌘S</Kbd></TooltipContent>
</Tooltip>

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. That content is linked to the trigger as its description.

API Reference

Tooltip

Sets asChild. 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