KeyboardShortcutTooltip
Use the KeyboardShortcutTooltip component to display a keyboard shortcut
inside a tooltip.
Import
import { KeyboardShortcutTooltip } from '@dynatrace/strato-components/content';
Demo
The component opens when the user hovers over the trigger, which must be an
interactive element, such as a button or input. Use the keys prop and the
format shown in
aria-keyshortcuts
to display the shortcut in the tooltip. See Usage for additional
guidance.
Add label
Use the text prop to add an optional label above the keyboard shortcut.
Place tooltip
Use the placement prop to set the position of the tooltip relative to the
trigger element.
Disable tooltip
To disable the tooltip, set the disabled prop. The tooltip won't appear on
hover.
Disable keyboard shortcut
Set the shortcutDisabled prop, to display KeyboardShortcutTooltip in a
disabled state. The tooltip with the shortcut will appear on hover, but with
disabled styling.