PopoverEducational

PopoverEducational doesn't behave like regular popovers where they are open/closed upon user interaction, i.e. Tooltip, Dropdown, or ComboBox. PopoverEducational visibility is not directly controlled by the user; instead, its visibility is defined as part of a broader user experience and the user interaction engagement with this experience.

In most cases, PopoverEducational might be already visible on page load. See visible on page load to learn more. However, popover-based components rely on the component opening/dismissing event to capture focus.

If PopoverEducational is already visible, we need its content to be keyboard accessible in sequential order. Don't use Layer to wrap PopoverEducational as it would move PopoverEducational outside the DOM hierarchy of the parent component and it will lose contextual sequencial order. The content will placed last in the keyboard navigations sequence, becoming unreachable in its content context. Moreover, make sure PopoverEducational is implemented right after the code of the anchor element so that it navigates the popover right after the anchor.

To provide an accessible experience, make sure accessibilityLabel introduces the elements on the screen that PopoverEducational is providing context about. Use id paired to aria-describedBy to link PopoverEducational to the element is providing additional information about to the user.

We recommend passing the following ARIA attribute to PopoverEducational for a better screen reader experience:

• accessibilityLabel: describes the main purpose of a PopoverEducational for the screen reader. Should be unique and concise. For example, "Save to board" instead of "PopoverEducational". It populates aria-label.

When not passing children, PopoverEducational handles role. However, when passing children to a custom PopoverEducational, role is set to "tooltip" by default. Override role following the guidance provided.

For the role prop, use:

• 'tooltip' if the PopoverEducational is a simple contextual text bubble that displays a description on a feature. When message is passed with no primaryAction, role is set to "tooltip".
• 'dialog' if the PopoverEducational is a dialog that requires a response from the user. When primaryAction is passed to PopoverEducational, role is set to "dialog".

The message prop accepts either a string or Text. Use a string for simple messages without any visual style. PopoverEducational will handle the message style and adherence to design guidelines. If a message with more complex style is required, such as bold text or inline links, use Text to wrap your message with any additional Text or Link usages contained within.

CTA buttons are used to move users through an onboarding or informational flow.
Generally with the text “Next”.

primaryAction displays a CTA button at the bottom of PopoverEducational.

For more flexibility, PopoverEducational allows passing children. If passed, message and primaryAction are not rendered.

PopoverEducational doesn't overwrite style in children or set any padding or margin, therefore, make sure any Text's color is "light" and any Button's color is "white".

The maximum width of PopoverEducational. PopoverEducational has different size configurations:

• sm: 230px wide by default. Height grows to accommodate
• flexible: Without a defined maximum width. Grows to fill the container. Height grows to accommodate copy.

PopoverEducational's positioning algorithm requires that the anchor element renders before PopoverEducational is rendered. If PopoverEducational should be visible on page load, use useEffect to toggle the visibility after the first render.

PopoverEducational supports zIndex