Key Points
- To create contrast the popovers in the light theme use a dark background, and the dark theme uses a light background
- Popovers are trigger by an icon button, this should be within close proximity to the content the tooltip is supporting
- Popovers can contain text, media and other content
- Popovers are triggered on hover or by being tapped on touch devices
- Popovers can be displayed in multiple orientations
- For text only content use a tooltip components
Usage
Popovers have the same use cases as tooltips but the distinct difference is that the content can be more complex than just text, such as media and other components.
To stand out from the main content popovers use the opposite surface colour. In the light theme the background is the dark card background and in the dark theme it is visa versa.
Popover requires an icon button to trigger its display. The popover can be triggered by tapping or hovering events.
Popvers should have an inner padding of 16px to separate the content and outer edge. Images or other media can touch the edge if required.
Orientation
A popover can be placed around all four directions of the icon button depending on their usage in the overall UI. If the containing text greatly increases the height then the arrow indicator can move to an edge of a side as required.
Popovers v Tooltips
|
|
Popover |
Tooltip |
|---|---|---|
|
Content |
Text, media and other component |
Concise text only |
|
Event Trigger |
Triggered by tapping or hovering an icon button |
Triggered by tapping or hovering an icon button |
|
Overall Height |
Popovers can be adjusted to suit the content. Content that is greater that container height will trigger a scrollbar. |
Tooltip expand as text increase, but each line should not exceed maximum length |
File Links