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

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 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.

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

Props

InformationOverlayProps

Signature:

export declare type InformationOverlayProps = & ( | );

InformationOverlayBaseProps

extends,

Name	Type	Default	Description
placement?		'bottom'	The preferred placement for the overlay if there is enough space. If the preferred placement is not possible, the overlay will be positioned according to the available space.
variant?		'info'	Determines the styling and the trigger icon.

InformationOverlayControlledProps

Name	Type	Default	Description
open		-	Determines whether or not the overlay is open in a controlled scenario.
onOpenChange	(isOpen: ) =>	-	Callback fired when the open attribute changes in a controlled scenario.

InformationOverlayUncontrolledProps

Name	Type	Default	Description
defaultOpen?		false	Determines whether or not the overlay is initially opened in an uncontrolled scenario.

InformationOverlay.Content

You can use the InformationOverlay.Content component to render any content inside the InformationOverlay overlay.

InformationContentProps

extends,

InformationOverlay.Trigger

You can use the InformationOverlay.Trigger component to render a custom trigger for the InformationOverlay overlay.

InformationOverlayTriggerProps

extends,

Name	Type	Default	Description
'aria-label'?		-	Optional aria-label to provide an additional description for the trigger.