# Popover

<figure><img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FFDXI06s9PxSLnlYOtjqN%2FPopover%20Hero.png?alt=media&#x26;token=cabb4e76-df81-4a14-b8ff-ac182443354f" alt=""><figcaption></figcaption></figure>

## Overview <a href="#id-605b2c" id="id-605b2c"></a>

A popover is an overlay that appears above page content and can contain formatted text. Popover appears when rolling over, clicking, or tapping an element.

## Guidelines

Its content can be structured with a title and paragraphs, and placement can be customized.

{% hint style="warning" %}
Limit the use of popovers, as they can become overwhelming.
{% endhint %}

<figure><img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FX8Xi3kyC4QJ1nbutvoF1%2FPopover%20Example.png?alt=media&#x26;token=f79f6919-2392-4507-85a7-70263c2efb1e" alt=""><figcaption></figcaption></figure>

### When to use

* When you need to display additional content to give more context to users.
* When this additional content is longer than one sentence or needs to be formatted.

### When not to use

* For smaller overlays. Use [tooltip](https://design.mirakl.com/design/components/overlays/tooltip) instead.

## Content <a href="#main-elements" id="main-elements"></a>

Popover content should follow our [content guidelines](https://design.mirakl.com/content/writing-for-mirakl).&#x20;