> For the complete documentation index, see [llms.txt](https://outdraw-academy.gitbook.io/ux-patterns/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://outdraw-academy.gitbook.io/ux-patterns/popover.md).

# Popover

{% embed url="<https://youtu.be/EWp65UQpB5g>" %}

Popovers provide additional contextual information, options, or actions related to the UI element they are associated with.

## Characteristics

Popovers are typically [non-modal](/ux-patterns/popup.md#characteristics). They usually don't use backdrops since dimming the interactive content wouldn't make sense.

Popovers usually use the '[light dismiss](/ux-patterns/popup.md#characteristics)' - The popover will disappear if a user hovers out of the element that triggered it or clicks out of the popover.

## Categorization

Popovers are a type of popup. They are on the same level as dialogs and other groups like alerts, notifications, lightboxes, etc.

<figure><img src="/files/k1caEzDOJFaETMcH4jdb" alt=""><figcaption></figcaption></figure>

## Examples

{% tabs %}
{% tab title="👉 Popover menu " %}
**👉 Popover menu** — It presents a set of options in a compact form. It typically appears when the user interacts with a specific trigger element, such as a button or icon. It is designed to be unobtrusive and contextually relevant to the user’s interaction.

<figure><img src="/files/uHZWDkWSCOxBD0AM2HuQ" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="🎨 Color Picker" %}
**🎨 Color Picker** — It offers users a visual interface to select colors for design or customization purposes. It can provide various mechanisms, such as sliders, color palettes, or input fields.

<figure><img src="/files/7lmmhdbTlyEYDZVJCuri" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="📆 Date picker" %}
📆 **Date picker** — It allows users to select specific dates. They usually offer options to navigate through the calendar or input date and time values.

<figure><img src="/files/RtmJuReX4iy12LupWtgS" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

***

## Popovers in design systems

{% tabs %}
{% tab title="Material Design" %}
In the [‘menus’ ](/ux-patterns/backdrop.md)category, we see a **👉 popover menu** that is displayed on top of the content after a user interacts with a trigger, a button, for example. They show a list of options to choose from.

<figure><img src="/files/KWBUFXTxw5kRJ5vPUoeO" alt=""><figcaption><p>Material Design — Popover menu (Source: <a href="https://m3.material.io/">https://m3.material.io/</a>)</p></figcaption></figure>

📆 [**Date pickers**](https://m3.material.io/components/date-pickers/overview) are also listed as a separate component. They are defined because of their function, choosing the date, not their structure. Date pickers come as a popover on desktop or a modal dialog on mobile.

<figure><img src="/files/2KxyZWw25br5TEzuwsG0" alt=""><figcaption><p>Material Design — Date picker (Source: <a href="https://m3.material.io/">https://m3.material.io/</a>)</p></figcaption></figure>
{% endtab %}

{% tab title="🍎 Human Interface Guidelines" %}
[**Popover menus**](https://developer.apple.com/design/human-interface-guidelines/menus-and-actions) — Context menus, dock menus, edit menus, and general menus. They all provide functionality related to a triggered item without blocking other UI elements.

<figure><img src="/files/LFV93erX3N68RinfAHK8" alt=""><figcaption><p>HIG — Popover menus (Source: <a href="https://developer.apple.com/">https://developer.apple.com/</a>)</p></figcaption></figure>

[**Popovers**](https://developer.apple.com/design/human-interface-guidelines/popovers) — ‘A popover is a transient view that appears above other content when people click or tap a control or interactive area.’ and that we should ‘use a popover to expose a small amount of information or functionality.’ So that aligns with our definition 🚀.

<figure><img src="/files/B54FSicz5sgaOSJBlzBw" alt=""><figcaption><p>HIG — Popover (Source: <a href="https://developer.apple.com/">https://developer.apple.com/</a>)</p></figcaption></figure>

**🎨** [**Color well**](https://developer.apple.com/design/human-interface-guidelines/color-wells) (a popover color picker) — It’s included in the ‘selection and input’ section together with other components, like text fields, pickers, toggles, etc.

<figure><img src="/files/TZJ1LDpN6uVNKYlxiGaq" alt=""><figcaption><p>HIG — Color well (Source: <a href="https://developer.apple.com/">https://developer.apple.com/</a>)</p></figcaption></figure>
{% endtab %}

{% tab title="Polaris by Shopify" %}
‘[**Popovers**](https://polaris.shopify.com/components/overlays/popover) are small overlays that open on demand. They let merchants access additional content and actions without cluttering the page.’ 

<figure><img src="/files/KLljgbdNr0REGEUdpcR8" alt=""><figcaption><p>Polaris by Shopify — Popover (Source: <a href="https://polaris.shopify.com/">https://polaris.shopify.com/</a>)</p></figcaption></figure>
{% endtab %}
{% endtabs %}