videorc/uiShortcut Tooltip
A control's tooltip with its bound shortcut as one keycap, keyboard-first and quiet. It wraps the control, so the tooltip never touches the control's own attributes.
Installation
$ pnpm dlx shadcn@latest add @videorc/shortcut-tooltipUsage
import { ShortcutTooltip } from "@/components/ui/shortcut-tooltip";<ShortcutTooltip accelerator="CmdOrCtrl+K" label="Search">
<Button aria-label="Search" size="icon" variant="ghost">
<SearchIcon />
</Button>
</ShortcutTooltip>With no accelerator (nothing bound yet) the tooltip shows the label alone.
Examples
Around a switch
The trigger is a wrapping <span>, so the tooltip's handlers and its data-popup-open land there: a Switch keeps its own data-checked, and a Button its own render. className lays the wrapper out (flex flex-col around a whole row); it never styles the control.
Theming
| Token or attribute | Meaning |
|---|---|
glass-float-tooltip | The tooltip, through Tooltip |
glass-keycap | The shortcut, through Shortcut keys |
data-slot="tooltip-trigger" | On the wrapper |
Accessibility
The tooltip opens on hover and on keyboard focus of the control inside the wrapper. It names the control for sighted users only, so an icon-only control still needs its own aria-label, and a tooltip is never the only place a fact lives. Give the control aria-keyshortcuts when its shortcut matters to assistive tech.
API reference
Prop
Type
Shortcut Keys
The one way to show a shortcut. Takes an Electron accelerator and prints it the way the platform's own menus do, as a keycap or as the status bar's quiet text.
Tooltip
A short label for a control on the tooltip tier of the float glass. It waits 600 ms for a deliberate hover, and its neighbours under one provider then open at once.