Popover
Popover is used to display content on top of others. It needs to be triggered by an action.
1. Anatomy
Value | Purpose |
role= “button” | Sets on the popover trigger to indicate that it is clickable. |
aria-expanded= “boolean” | True if the popover is visible; False if the popover is hidden. |
data-popover | Popover content. |
aria-labelledby | Indicates the parent component that it belongs to. |
2. Configurations
2.1 Trigger action
There are 2 trigger actions: hover and click. Click is used as default.
2.2 CloseOnClickAway
There are two ways to close the popover. Automatic (default) vs manual. By defaut, the popover closes automatically when clicking outside the popover’s container. If closeOnClickAway is set to false then the popover will remain open even when clicking outside its container. Use the close() method in this case to close the popover.
2.3 Arrow
It is a boolean value. true to enable the arrow; false to disable the arrow.
2.4 Placement
There are 13 options of placement. Auto is used as default. See the below chart for the rest of the custom placement.
3. Behavior
3.1 Click as the trigger action
Click is used as default.
3.2 Hover as the trigger action
Please note hover does not have accessibility support. Do not use hover when the popover’s content is important.
5. Composibility
You can customize the content of popover. The popover container wraps around the content component.
- Manipulate the content components’ width to define the dimension of the card.
- Set width on content components to wrap the text within the content components.
6. Keyboard experience
The keyboard experience only applies when “click” is used as the trigger action.
Please note hover does not have accessibility support. Do not use hover when the popover’s content is important.
8. Resilience & responsiveness
- Manupulate the size of the child components to define the dimention of the card.
- Passing values to a class to design the responsiveness of the component yourself.