# ε Tooltip

Element: Shows info text when users press certain screen objects. Desktop it also includes hover and focus states. Tooltips display a text label identifying an object, such as a description of its function or further info.

[Styleguide Link](https://zpl.io/2vDWlrJ)

* Parent: [Slider - Ctrl](/core/overview/slider.md) (State:Pressed), Multiple others
* Child: [Label](/core/overview/label.md)

## Properties

**Arrow:** None, Top Left, Top Center, Top Right, Left, Right, Bottom Left, Bottom Center, Bottom Right

The arrow for the tooltip will point at the object that was tapped to reveal the tooltip. The spacing between the edge of that object and the edge of the tooltip is set at 4dp.

<figure><img src="/files/GYmGKMQw3g8Sof8HRFwa" alt=""><figcaption></figcaption></figure>

**NOTE:** The padding between the edge and label varies based on it's use. What's being shown (16dp) is the default. For example, with a slider that is displaying a single value the tooltip has padding of 8dp left and right.

### Additional Properties

**Max-Width:** The ability to set the width at which the contents will wrap to the next line. By default the Tooltip body hugs the contents. With this property set, it still hugs the content up to the max-width and once it reaches that width it will wrap.

## Behavior

A tooltip displays on tapping and holding a screen object (on mobile) or hovering over it (desktop). We display the tooltip as long as the press or hovers interaction takes place.

Upon a tap and release the tooltips displays for 1500ms, unless another action is taken by the user prior to end of that time period, in which it would disappear immediately on that new action. On open and close of the tooltip a 250ms grow/shrink fade transiton is used.

**Content:** The information within a Tooltip will wrap to the next line upon reaching the tooltips max width.

<figure><img src="/files/sZdqtnnIuL0RyaZA7dnW" alt=""><figcaption><p>Tooltip on a Slider</p></figcaption></figure>

<figure><img src="/files/YSHpHK4vSl9MQ6WG3w4D" alt=""><figcaption><p>For additional information on fields</p></figcaption></figure>


---

# 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://able.bucca.com/core/overview/tooltip.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.