Tooltip

Use the Tooltip component to show additional text on hover and click on its trigger element. The trigger element can only be an interactive element, like a button or input.

Import

import { Tooltip } from '@dynatrace/strato-components-preview/overlays';

Use cases

CodeSandbox

Change the placement

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

CodeSandbox

Accessibility

The content of the tooltip is not accessible to screen readers by default. If the trigger doesn't provide any descriptive text that can be read to the consumer, like when using an icon, or isn't using any alternative like an aria-label, you need to link the tooltip text to the trigger. To archive this, you need to pass an id property to the tooltip itself and add an aria-describedby or an aria-labelledby property to the trigger and reference that id. To decide which of these two you should use, consider that the label always explains the thing itself (i.e. Edit-button) and a description describes what the trigger does (i.e. The button allows you to change the title of the document).

CodeSandbox

Props

TooltipProps

extends

Name	Type	Default	Description
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.