> 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/tooltip.md).

# Tooltip

Tooltips are used to provide additional information about a specific element on the screen.

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

Tooltips are usually triggered by hovering over an element or tapping on it. They display contextual information, for example, to explain the purpose of a button.

## Characteristics

Tootlips are [non-modal](/ux-patterns/popup.md#characteristics), so they don't disrupt the user's flow. They don't use a backdrop and generally disappear when you move the cursor away from the trigger, so it's a '[light dismiss](/ux-patterns/popup.md#characteristics)'.

## Categorization

Tooltips are in the popovers group.

<figure><img src="https://3752687644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFraMoMUTdcaUke4xMQcj%2Fuploads%2FvJURnJEmzxk2Caf5WCgm%2FGRAPH%20tooltips.png?alt=media&amp;token=d92fb35f-68bf-4965-bf74-df534e8c20cd" alt=""><figcaption></figcaption></figure>

## Examples

{% tabs %}
{% tab title="Simple" %}
A classic example of a tooltip is when you hover over a button, and after a short delay, a 👉 text explaining its functions appears.

<figure><img src="https://3752687644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFraMoMUTdcaUke4xMQcj%2Fuploads%2FyV890kOLtUmW8h7FAl1G%2Ftooltip%201.png?alt=media&amp;token=1a2f5797-b781-4e7c-a310-b59899cfea8f" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Advanced" %}
A slightly different example would be to 👉 provide more details on hover, like in the case of Asana’s ‘Share’ button, which gives an overview of what sharing settings are currently implemented so that users don’t have to open the sharing dialog.

<figure><img src="https://3752687644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFraMoMUTdcaUke4xMQcj%2Fuploads%2F4hsj0RD1MySHTOQzvk5p%2Ftooltip%202.png?alt=media&amp;token=ef2c9b8d-d20b-49a1-b344-69109e2004fc" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

## Tooltips in design systems

{% tabs %}
{% tab title="Material Design" %}
[Material Design](https://m3.material.io/components/tooltips/overview) differentiates between plain and rich tooltips. Plain tooltips display static information that describes the function of a UI element. Rich tooltips provide detailed context, like describing the value of a feature.

<figure><img src="https://3752687644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFraMoMUTdcaUke4xMQcj%2Fuploads%2F6KqqPei7KlJfAHqUYd0d%2FMaterial%20design%20-%20tooltips.png?alt=media&amp;token=de78f3bd-9db4-495d-adbe-c5e6c8df960c" alt=""><figcaption><p>Material Design — Tooltips (Source: <a href="https://m3.material.io/">https://m3.material.io/</a>)</p></figcaption></figure>

According to the general classification, we would categorize rich tooltips as popovers.
{% endtab %}

{% tab title="Polaris by Shopify" %}
[**Tooltips**](https://polaris.shopify.com/components/overlays/tooltip) are floating labels that briefly explain the function of a user interface element. They can be triggered when merchants hover, focus, tap, or click.’ — This aligns with our definition of a tooltip as well ✅.

<figure><img src="https://3752687644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFraMoMUTdcaUke4xMQcj%2Fuploads%2FCrF6cswf0A1WnZMQaICu%2Fpolaris%20tooltip.webp?alt=media&amp;token=3e5b405c-7b0c-4e98-acc1-586d78ba527f" alt=""><figcaption><p>Polaris by Shopify — Tooltip (Source: <a href="https://polaris.shopify.com/">https://polaris.shopify.com/</a>)</p></figcaption></figure>
{% endtab %}
{% endtabs %}