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.

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

Props

KeyboardShortcutTooltipProps

extends, ,

Name	Type	Default	Description
keys		-	The list of keys the component should display, specified in the aria-keyshortcuts format.
shortcutDisabled?		'false'	Whether the component should be rendered in a disabled state.
text?		-	Text displayed in the tooltip component.

TooltipBaseProps

extends, ,

Name	Type	Default	Description
children		-	Single child of the tooltip considered to trigger the tooltip element.
disabled?		false	Defines if the tooltip is disabled or not.
placement?		'top'	Placement of the tooltip relative to its trigger element.
defaultOpen?		false	Defines if the tooltip should be open initially when used uncontrolled.
open?		-	Defines if the tooltip is open / closed in a controlled component. In this case, you need to react to `onOpenChange` yourself in order to open and close the tooltip.
delay?		'default'	Defines the type of delay which is used for the tooltip.
onOpenChange?	(isOpen: ) =>	-	Callback fired when the tooltip opens.
fallbackPlacements?	[]	-	Array of placements to be used as fallback if the tooltip doesn't fit at the specified placement.