Very similar to the tooltip which is used with hover, the popover provides actions on click.
Best practices
- If the actions are totally essential for the user’s choice, opt to show them directly in the interface.
- In most cases, opt to show the popover below the target element.
- Prefer the click than the hover interaction
- Make a custom popover thanks to the UI kit items is sometimes the best option to have a custom solution
- When needed, add a title on the popover
- If there are a lot of items, add a scroll bar not to disturb the user’s attention, or a show more button
Layout
The popover superimposes itself on the screen. In relation to the position of the element within the interface, it may open from the bottom, the top, the left or the right.
The interactive items inside can be checkboxes, links, ghost buttons with or without icon, diverse list elements. Respect the 8px grid to place the elements: a 16px padding is recommended.
A title can be added on top of the actions, text content as well, but make sure the user identifies clearly the interactive elements.
Appearance
They are available in dark and light.
It can be used on datatables elements, on header’s icons, to provide a guided tour, etc.
If you only want to provide information, visit the tooltip component.
#01
To create your own Popover, you can start by picking a Background.
#02
Detach the symbol and drag and drop the best symbol according to your need into the popover folder, by exploring the symbol list.
#03
Keep adding all the necessary components into the folder. You can resize the item symbol in height to fill the arrow. But keep a consistent padding of 8px around the popover.
Code & Design assets
Request code and design assets for creating user interfaces.
