Skip to main content

KeyboardShortcutTooltip

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

    OverviewPropertiesUsageChangelog

    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.

    Adapt combination to the platform​

    The keys prop also accepts mod, which resolves to Meta on macOS and to Control on every other platform. For a combination that differs by more than the modifier, pass an object instead of a string: macos applies on macOS when it is set, and default applies everywhere else.

    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.

    Still have questions?
    Find answers in the Dynatrace Community