Tooltip

Use the Tooltip component to display extra information when users hover on a trigger element.

OverviewPropertiesUsage

Import

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

Demo

The Tooltip component shows brief, helpful information when users hover on a trigger. The trigger element must be interactive. See Usage for best practices.

CodeSandbox

Placement

Use the placement prop to set the position of the tooltip relative to the trigger element. The default placement is at the top.

CodeSandbox

Accessibility

The content of the tooltip isn't accessible to screen readers by default. If the trigger doesn't include a label, it's only an icon for example, and there isn't an aria-label, you must link the tooltip text to the trigger.

Pass an id property to the tooltip itself and add an aria-describedby or an aria-labelledby property to the trigger and reference the id.

In choosing which property to use, consider that a label describes the thing itself (Example: Edit button), whereas a description describes an action or purpose (Example: Allows you to change the title and text of the document).

CodeSandbox