Popovers display overlay information with a header title and provide additional action buttons. It can be triggered by hover or click.
Popover Variations
Information only
Displays only the contextual information related to the referred item.
With action
Provide actionable buttons for the user to act upon.
Guideline
• On default, tooltips are placed on top of the selected item. But when there isn’t enough space in the viewport, it should be placed to the side or below as needed.
• For popovers triggered by hover, the popover will stay displaying when the cursor is hovering on the popover itself. It disappears when the cursor moves somewhere elsewhere the referred item or the popover.
When to Use
• To give more contextual information or action about a selected item.
• The information shown can be a form of long sentence or list (ordered/unordered)
• Provide actionable buttons but not critical to act upon it.
When not to Use
• Displaying actionable items which is crucial for the main use flow. For example, displaying a form to input username or password to log in.