The sequence popover component is a temporary overlay object that provides detailed contextual information related to where the beacon object is positioned. This component is part of a tour workflow that onboards a user by directing their attention a series of points in the interface, providing relevant information to that object.
Styling within this container allows for an image and title, a callout, and buttons that allow the user to move forwards or backwards through the workflow.
Arrow positions can be set via the props.
Variants
Variants contain different versions of the component depending on specific properties, such as state, size, colour, optional iconography, etc.
| Property | Values | Default |
|---|---|---|
| ✏️ titleText Text | string | Title - limited to two lines |
| ✏️ descriptionText Text | string | Content explaining the feature. Limited to 5 lines. e.g. Variables are a powerful tool that lets you securely store and manage sensitive keys and configuration values. |
| ↳ ✏️ calloutText Text | string | This area is reserved for tips and examples. Limited to 4 lines. |
| hasStepper Boolean | true | false | true |
| hasBackButton Boolean | true | false | true |
| hasMedia Boolean | true | false | true |
| hasCallout Boolean | true | false | true |
Component dependencies
This component is internally dependent on the following components:
Related Components
Popover Basic
Popover is a temporary overlay window that contains contextual information
Popover Basic Help
A clickable circular information icon that triggers a PopoverBasic component to show contextual information in a temporary overlay.
Popover (Default)
A flexible, empty popover component that provides core positioning and open behavior without predefined content or structure.
Help and support