When to use a popover
- You have supplementary information and you want to save space on the page.
- You have an experience that requires offering tips, warnings or instructions to help users complete a task more efficiently.
Behavior
A popover is triggered by clicking a specific element on the page. Its beak should point directly at the clicked element. The popover should close automatically when the user clicks outside of it.
Best practices
Clear placement
Position the popover close to the triggering element with the beak pointing to it, ensuring users understand the association between the popover and the trigger.
Don’t let them take up the whole screen
Popovers should have a maximum width (typically between 250px and 400px) to maintain readability and usability without overwhelming the screen.
Make it accessible
Users using keyboard navigation or other devices should be able to access the popover.