Very similar to the tooltip which is used with hover, the popover provides actions on click.
Best practices
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.
Request code and design assets for creating user interfaces.