Popover - UI Element

Popovers are UI elements that are used to display nonessential information in a temporary window. After pressing the trigger element, the popover will float above the page content. Popovers can include components such as titles, hyperlinks, scrollbars, and images, among others.

‍

1. ‍No Tip Popover

These popovers can be used in various cases and mostly come up when the trigger button has a visually clear down state. Because the popover does not have a tip, the trigger button should appear on the side of it, and it can open up from any direction (left, right, top, or bottom).

‍

2. ‍Caret Tip Popover

These types of popovers are implemented to showcase the relationship between the popover and the source from which it was triggered. We use caret tips when the trigger button lacks a visually clear downstate, as well as for icon buttons.

‍

3. ‍Tab Tip Popover

The most common use for this type is when a popover is connected to a header area or a toolbar where the trigger button will sit. The tab tip can only appear on the right or left side of the container.

‍

• Size. The size aspect of a popover adjusts based on the type of content they include - they will accommodate to best showcase it.
• Placement. While the position where the popover will appear depends on its type, it can generally be placed to the right, left, top, or bottom of the content they are related to.
• Color. Because popovers are user interface elements, they need to maintain visual coherence and match the overall aesthetic of the website or app. As a general rule, popups that appear on a light background should have a darker tone and vice-versa.
• Content. The information inside a popover should not be mandatory for users to read. This provides a lot of flexibility for the categories of content it can include, as long as the information is additional and not urgent.
• Triggering Button. No matter what type it is, every popover component should include a triggering button.
• Focusable Element. While popovers may display various information and design elements, it is mandatory that each popover has a clear focusable element.

• Additional Information. The base-level role of popovers is to provide users with secondary and tertiary data related to the page they are navigating. If the details included in the popover are not enough, there is the option to add a Learn More call to action button.
• Tooltip Assistance. Oftentimes, the content we want to include is too large for a tooltip. Popovers can be implemented to assist the data in tooltips.
• Contextual Relationship. Popovers can also be implemented in order to create a contextual relationship to elements on the screen that a dialog would not be able to provide.
• Maintaining Position. Popovers help users access different information without the need to leave the page on which they are currently.

‍

Our uinkits system is a Figma Design System and UI Kits that include UI components that allow you, as a UI UX designer, to create your design products as quickly as pressing a button. You can find popovers and everything you need to create the perfect product design in Figma – all in just a few clicks. All you have to do is take the UI design component you need, and you’re ready to use it in your designs!

So, get your uinkits package and start designing now!

‍