Skip to main content

    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-preview/content';

    Use cases​

    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 the trigger icon​

    The InformationOverlay.Trigger slot also allows to customize the icon of the trigger by wrapping the desired icon inside the InformationOverlay.Icon slot component.

    CodeSandbox

    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.

    CodeSandbox

    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.

    CodeSandbox

    Open the overlay by default​

    Use the defaultOpen prop to initially set the overlay to open in an uncontrolled scenario.

    CodeSandbox

    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.

    CodeSandbox
    Still have questions?
    Find answers in the Dynatrace Community