InformationOverlay

The InformationOverlay provides additional information via an overlay, the position of which can be adjusted. According to the type of information, the variant can be set. The trigger consists of an icon and an optional text. By default, the variant is neutral and the overlay is positioned on the bottom.

OverviewPropertiesUsage

Import

import { InformationOverlay } from '@dynatrace/strato-components/content';

Demo

Provide context, guidance, feedback, and other helpful information with the InformationOverlay component. See Usage for best practices, including content guidelines.

CodeSandbox

Add trigger text

Apart from using the default trigger with only an icon, it's possible to specify additional text for the trigger.

CodeSandbox

Change trigger icon

Use the InformationOverlay.Trigger slot to customize the icon for the trigger. Wrap the desired icon inside the InformationOverlay.Icon slot component.

CodeSandbox

Change color

Use the color prop to set the color according to the type of information. Changing the color also affects the displayed icon.

CodeSandbox

Change overlay placement

Use the placement prop to set the preferred position for the overlay if there is enough space. If the preferred position is not possible, the overlay will be positioned according to the available space.

CodeSandbox

Open overlay by default

Use the defaultOpen prop to set the overlay to open in uncontrolled scenarios.

CodeSandbox

Add aria-label

Use the aria-label prop on the Trigger to set a specific aria-label on the trigger button. If the trigger is just an icon without a text label, add an aria-label to help users understand the meaning and functionality.

CodeSandbox