What are Popovers in UI Design and How to Use Them?

UI elements help build up the user interface in various ways. What comes to your mind when you think about UI design elements? Maybe the colorful and descriptive icons that improve the user experience? Or maybe some navigation tools such as menus?

Well, even if it may not be the first answer on everyone’s mind, popovers are important UI elements that are part of most UI UX designs, no matter the website or app they are applied to.

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.

These UI design elements are used to expose small amounts of information or different functionalities. To put it into perspective, popovers stand as a mix between dialogs and tooltips.

Before we dive into the ways we can implement popovers during our UI UX design process, we need to be accustomed to the three types of popovers that exist. Depending on the context of the app or web design, these can be used to improve the user experience. 

• No Tip

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).

• Caret Tip

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.

• Tab Tip

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.

There are a couple of UI UX design principles that should be respected when creating popovers for websites and apps.

• Size

The size of a UI element dictates the way users will perceive its importance. In the same way, the size aspect of a popover adjusts based on the type of content it includes. This means that it will accommodate to best showcase a specific type of content. 

• 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. As UI UX designers, we need to find the most aesthetically pleasing placement while also taking accessibility into consideration. 

• Color

Color theory is a very common UI design principle. The colors we choose for each UI element will directly impact the way users relate to our messages. Popovers need to maintain visual coherence and match the overall aesthetic of the website or app, as well as support the brand identity. As a general rule, popovers that appear on a light background should have a darker tone and vice-versa.

• Content

One aspect that we need to keep in mind when designing this UI element is that the information inside a popover should not be mandatory for users to read. On the positive side, 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

Another important design principle of creating popovers is that no matter what type it is, every popover should include a triggering button. Popovers can be triggered in various ways, such as through clicking, hovering, or focusing.

• 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 are options such as adding a Learn More call to action button. This can significantly increase user experience by making the website or app user interface more intuitive.

• Tooltip Assistance

Tooltips and popovers are both UI design elements that are often confused with one another. The main difference between these two is that a tooltip will include a short message when users hover over a word or an icon. Oftentimes, the content we want to include is too large for a tooltip.

Popovers can be implemented to assist the data in tooltips, as they can support larger bodies of text, as well as links to external sources. 

• Contextual Relationship

Speaking of similar UI elements, dialogs share a few traits with popovers. However, these come with a built-in role, which makes them less flexible than popovers. This is why 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. This is a great tool for UI UX designers, as it makes a page more usable and attractive to users.

Think about how frustrating it is to have to leave the page you are currently navigating every two minutes - popovers come with the solution for this problem!

We at uinkits understand the importance of great user experiences and creating amazing UI designs. That’s why we’ve developed a Figma UI Kit with design components that include these essential UI elements that enable you to design intuitive and user-friendly interfaces effortlessly.

“You press the button, we do the rest.” – Kodak.

Inspired by this iconic tagline from Kodak, we believe in simplifying the design process for you. Our Figma UI Kit, uinkits, is a complete design system with UI components that allows you, as a UI UX designer, to create your products as quickly as pressing a button.

Our design system includes UI components, icons, variables, cards, buttons and everything you need for your design process. All you have to do is take your UI design component needed, and you’re ready to use it in your designs!