# Tooltip

<figure><img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2F2nAzHqFnDPoyc3rNGNEu%2FTooltip%20Hero.png?alt=media&#x26;token=0610842a-1eab-4aa8-9681-30d689bdd336" alt=""><figcaption></figcaption></figure>

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

Tooltips add additional context to a button or other UI element.

<figure><img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FOZF6MxUFdVSzTXYAhQEG%2FTooltip%20Example.png?alt=media&#x26;token=d7b68889-11ec-4bef-8ae2-12be5e129f71" alt=""><figcaption></figcaption></figure>

## Guidelines

Tooltips can only contain a short volume of text.

{% hint style="danger" %}
Do not communicate critical information in a tooltip; think of it as a "Did you know?" prop.
{% endhint %}

### When to use

* When you need to display additional content to give more context to users.

### When not to use

* For long-text overlays. Use [popover](https://design.mirakl.com/design/components/overlays/popover) instead.
* As a bandaid on a broken experience.

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

Tooltip content should follow our [content guidelines](https://design.mirakl.com/content/writing-for-mirakl). Keep them clear and useful.

<figure><img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2Fj9BwgkCgX0l5prI1JVfB%2Fimage.png?alt=media&#x26;token=7f11a9a8-8683-4c15-92b5-0f33ce8662bb" alt=""><figcaption></figcaption></figure>