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.


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







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.







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