# 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](https://outdraw-academy.gitbook.io/ux-patterns/popup#characteristics). They usually don't use backdrops since dimming the interactive content wouldn't make sense.

Popovers usually use the '[light dismiss](https://outdraw-academy.gitbook.io/ux-patterns/popup#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="https://3752687644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFraMoMUTdcaUke4xMQcj%2Fuploads%2Ft7BIV9OIqB787cqzzsnY%2FGRAPH%20popovers.png?alt=media&#x26;token=d33c0774-26c0-4a21-9e18-39a06794ca6f" 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="https://3752687644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFraMoMUTdcaUke4xMQcj%2Fuploads%2FwZoggMIK1okWB2pb0KCI%2Fpopover%20menu.png?alt=media&#x26;token=dc6a499d-44c0-4c4c-8782-734263f85bf5" 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="https://3752687644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFraMoMUTdcaUke4xMQcj%2Fuploads%2FCFVCMRw03zmw7g16DkBz%2Fcolor%20picker.png?alt=media&#x26;token=42061d03-c1f5-4f8e-b33d-f89aae70e5aa" 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="https://3752687644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFraMoMUTdcaUke4xMQcj%2Fuploads%2FSzIPQB7s1wBQDJ1ikapR%2Fdate%20picker.png?alt=media&#x26;token=ac574083-89fc-4dfc-89b4-3a05efb65d50" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

***

## Popovers in design systems

{% tabs %}
{% tab title="Material Design" %}
In the [‘menus’ ](https://outdraw-academy.gitbook.io/ux-patterns/backdrop)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="https://3752687644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFraMoMUTdcaUke4xMQcj%2Fuploads%2FsRuRCDH1H1cbUQ3uDMEt%2Fmaterial%20design%20-%20popover%20menu.png?alt=media&#x26;token=8f9372f0-e6c1-46ec-8295-5357730a7b67" 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="https://3752687644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFraMoMUTdcaUke4xMQcj%2Fuploads%2Fd9jAnbDPI9ahxVHoYgfe%2FMaterial%20design%20-%20date%20picker.png?alt=media&#x26;token=0d676d7c-6689-4fbd-92f4-6c816f999fd7" 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="https://3752687644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFraMoMUTdcaUke4xMQcj%2Fuploads%2Fp4eAg3lO5M36uXmTIv5X%2FHIG%20menus.png?alt=media&#x26;token=e66a61e9-8da2-458c-a8fb-95170fe8ae80" 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="https://3752687644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFraMoMUTdcaUke4xMQcj%2Fuploads%2FZHeMx1J0TM46dCueRqWK%2FHIG%20popover.png?alt=media&#x26;token=70e3db71-4469-4f26-8a2f-0418a3917920" 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="https://3752687644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFraMoMUTdcaUke4xMQcj%2Fuploads%2FI277c83KyA5VP5CZ1zVN%2FHIG%20color%20well.png?alt=media&#x26;token=1a795ece-d3eb-4b85-946b-66f121af85a2" 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="https://3752687644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFraMoMUTdcaUke4xMQcj%2Fuploads%2FYkgXEdasAqVCTWUXvmUE%2Fpolaris%20popover.webp?alt=media&#x26;token=1c1114b3-39a1-4d2f-ad5d-ff82b7776a6a" alt=""><figcaption><p>Polaris by Shopify — Popover (Source: <a href="https://polaris.shopify.com/">https://polaris.shopify.com/</a>)</p></figcaption></figure>
{% endtab %}
{% endtabs %}