Popover

Popovers provide the container and styles to overlay menus, tooltips, controls or text. They’re visually represented as a layer above other components and objects in a view, and float above a content view after being triggered by a click-event (or hover) such as a button, link, menu or icon. Popovers can contain range of content from simple text strings to inputs, or lightly structured content and imagery/illustration. It’s usage depends on the context.

When to use

- Describe the difference between visually similar elements.

- Hide information that's irrelevant once the user if familiar with the UI.

Examples

Popover stateless example
Always open
Popover opens on Click
Popover Opens on Hover
Hover
Popover Available Placements
Popover With Arrow
Popover Close from Content
Clipping Avoidance
Popover with Overrides

Overrides

Additionally, you can fully customize any part of the Popover through the overrides prop. The Popover consists of multiple sub-components that are listed bellow and you can override each one of them. To help you identify the names of these sub-components, you can highlight them through this selector:

always open