> 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

{% 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="/files/xeH0srpygHxES4I11fc9" 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="/files/DwfenFQTAKiz9w1q3jVq" 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="/files/s95Fxi42p5LLK1RUNnJQ" 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="/files/XvUYvpbG3py2IQziCgiV" 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="/files/DwAWLxA7NqDMuvmuzt4w" alt=""><figcaption><p>Polaris by Shopify — Tooltip (Source: <a href="https://polaris.shopify.com/">https://polaris.shopify.com/</a>)</p></figcaption></figure>
{% endtab %}
{% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.