Skip to main content

    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
    Still have questions?
    Find answers in the Dynatrace Community