KeyboardShortcutTooltip

Use the KeyboardShortcutTooltip component to display a KeyboardShortcut along with an optional text inside a tooltip. The KeyboardShortcutTooltip opens on hover and click on its trigger element. The trigger element can only be an interactive element, like a button or input.

OverviewProperties

Import

import { KeyboardShortcutTooltip } from '@dynatrace/strato-components-preview/content';

Use cases

Use the keys prop to specify the shortcut to be displayed inside the tooltip using the aria-keyshortcuts format.

CodeSandbox

Set additional text

Use the text prop to specify additonal text to be displayed along with the KeyboardShortcut.

CodeSandbox

Change the placement

Use the placement prop to set the tooltip's position relative to its trigger element.

CodeSandbox

Disable the tooltip

To disable the tooltip, set the disabled prop.

CodeSandbox

Disable the shortcut

Set the shortcutDisabled prop, to display the KeyboardShortcut in a disabled state. This way, the tooltip will still be shown, but the shortcut receives the respective styling and aria-attributes.

CodeSandbox