# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://outdraw-academy.gitbook.io/ux-patterns/popover.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.