Popover

Definition: A popover displays information about the targeted UI element.

When to use

Use a popover to display additional content, such as details, forms or actions, in response to a user's interaction. It can contain more information, including images, links, and interactive elements. It's suitable for presenting richer content or complex interactions.

Anatomy

  1. Title
  2. Text
  3. Tip (Available top, left, right & bottom)
  4. Tooltip

 

 

 

 

 

Placement

Popovers are typically centred on the screen or positioned in a way that ensures they are visible and do not overlap with the triggering UI element.

 

 

 

 

 

Trigger

Popovers can be triggered by various user actions, such as clicking or mouseover a help icon, or other interactive elements.

 

 

 

 

 

Where to use

✅ Interactive actions