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.
Import
import { InformationOverlay } from '@dynatrace/strato-components-preview/overlays';
Use cases
Add trigger text
Apart from using the default trigger with only an icon, it's possible to specify additional text for the trigger.
Change the color
Use the color
prop to set the color according to the type of information.
Changing the color also affects the displayed icon.
Change the 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.
Open the overlay by default
Use the defaultOpen
prop to initially set the overlay to open in an
uncontrolled scenario.
Provide an aria-label
Use the aria-label
prop on the Trigger
to set a specific aria-label
on the
trigger button. Especially in cases where the trigger consists of an icon only,
the aria-label
should be used to convey meaning and functionality to the user.