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 info
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 variant
Use the variant
prop to set the variant according to the type of information.
Changing the variant affects the displayed icon along with its color.
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.