Popover
Popover components offer contextual overlays that appear on hover or focus, revealing supplementary information or options directly linked to a specific element. They provide a space-saving way to enhance user experience by offering relevant details without interrupting the main content flow.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
API Reference
| Prop | Type | Default |
|---|---|---|
position | PositionTypes | top |
show | boolean | false |
Usage
General Guidelines
Do's
- Ensure the popover's design complements the overall interface and doesn't obstruct the user's view.
- Limit popover content to brief descriptions or supplementary details relevant to the trigger element.
Don'ts
- Overload with informations, keep popover content focused and relevant to avoid overwhelming users.
- Dont make dismissal difficult, the popover should be easy to close to avoid user frustration.
Writing Guidelines
When to use
- Use when providing supplemental information or definitions on hover or focus without disrupting the main content flow.
- Use when displaying contextual details or options related to a specific element within the interface.
When not to use
- Don't use when extensive information needs to be presented (consider using a modal component).
- Don't use when complex interactions or user actions are required (consider using a dedicated content area).
Use Case
General Use Cases
Popover are typically use for revealing calendar event details upon focusing on a date.
Digital Health Use Cases
For Digital Health Applications popover can be used for presenting medication dosage information upon clicking over a medication name in a list.
Accessibility Guidelines
- Add
aria-labelledbyto use it correctly, define an ID for the element you want to use as label and set the property to that ID. - Use
aria-describedbyattribute to provide descriptive text for an element, offering additional context or explanation. - Add
aria-haspopupto indicates the availability and type of interactive popup element that can be triggered by the element on which the attribute is set.