Skip to main content

    KeyboardShortcutTooltip

    Use the KeyboardShortcutTooltip component to display a keyboard shortcut inside a tooltip.

    OverviewProperties

    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.

    CodeSandbox

    Add label​

    Use the text prop to add an optional label above the keyboard shortcut.

    CodeSandbox

    Place tooltip​

    Use the placement prop to set the position of the tooltip relative to the trigger element.

    CodeSandbox

    Disable tooltip​

    To disable the tooltip, set the disabled prop. The tooltip won't appear on hover.

    CodeSandbox

    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.

    CodeSandbox
    Still have questions?
    Find answers in the Dynatrace Community