Popover
A popover is used to show more information when a user interacts with a trigger element.
Demo
Usage
When to use
- Show more information. Use a popover to show information that isn't essential to the current workflow, but that might be useful to know.
- Offer interaction. A popover can show interactive elements, like buttons, unlike a
Tooltipwhich only shows text.
When not to use
- Essential information. Don't use popovers for essential information or actions, because a user might not know they are there.
Format
- A popover doesn't offer any default content styling.
- Include padding between the popover frame and the content inside. The amount of padding depends on the content and density of the interface. Use a spacer constant for a consistent visual experience.
API Reference
Popover
Usage
To use Popover, you can import the component from the @dhis2/ui library
import { Popover } from '@dhis2/ui'
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| children | node | * | ||
| arrow | boolean | true | Show or hide the arrow | |
| className | string | |||
| dataTest | string | 'dhis2-uicore-popover' | ||
| elevation | string | elevations.e200 | Box-shadow to create appearance of elevation. Use elevations constants from the UI library. | |
| maxWidth | number | 360 | ||
| observePopperResize | boolean | |||
| observeReferenceResize | boolean | |||
| placement | custom | 'top' | ||
| reference | custom | A React ref that refers to the element the Popover should position against | ||
| onClickOutside | function |