Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99

--d --h --m --sGet Pro

Tooltip Modifier Hints

ProNew

Hold Alt to reveal every button's shortcut key at once and press Alt plus the key to run it, with the shortcuts always exposed through aria-keyshortcuts.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

Use this in dense toolbars and editors where discoverability of shortcuts matters and a tooltip per button would be slow.

Do not use Alt on macOS Option-sensitive text input, and do not use letters already bound by the browser or the page.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Log in Get Pro for $35

Props

TooltipModifierHints

Prop	Type	Default	Description
`actions`	`{ id, label, key, onRun }[]`	-	Buttons and their keys.
`modifier`	`Alt \| Control \| Shift`	`Alt`	Key that reveals the hints and prefixes the shortcuts.

Accessibility

Nothing depends on holding the key: each button is a normal button with aria-keyshortcuts and works by click, Tab and Enter.
The badges are aria-hidden, because the shortcut is already in aria-keyshortcuts.
The hints also hide when the window loses focus, so they cannot get stuck on.

Keyboard

Key	Action
Hold Alt (or the chosen modifier)	shows the key badges
Alt + the shown letter	runs that action
Release or leave the window	hides the badges

Testing

The pattern ships a Testing Library test (tooltip-modifier-hints.test.tsx) that covers exposed shortcuts, showing and hiding badges, running by key and blur.