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.

OverviewPropertiesUsage

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