---
metadata:
  - name: generator
    content: Diplodoc Platform v5.50.3
alternate:
  - https://divkit.tech/docs/en/concepts/tooltips.md
  - https://divkit.tech/docs/ru/concepts/tooltips.md
---
> **Documentation Index:** Fetch the complete configuration index at https://divkit.tech/docs/en/llms.txt

# Tooltips

While DivKit doesn't have a unified tooltip template, it offers a mechanism for displaying any layout as a tooltip.

{% cut "View an interactive example" %}

<iframe src="https://yastatic.net/s3/home/divkit/docs/1.0.8/index.html?url=https://yastatic.net/s3/home/divkit/doc_samples/common/tooltips_1.json" width="700" height="500" frameborder="1"></iframe>

{% endcut %}

## Declaration

To declare a tooltip for the desired div, you need to declare the `tooltips` array.

* `id`: Tooltip ID used to control the tooltip. Required field.
* `duration`: Tooltip display time in milliseconds. If set to `0`, the tooltip persists until the close action is called.
* `gravity`: Tooltip position relative to the view object in which it was declared.
* `transition_in`: Tooltip appearance animation. By default, this is a 10 dp slide-down effect.
* `transition_out`: Tooltip disappearance animation. By default, this is a 10 dp slide-up effect.
* `div`: Layout of any div to display as a tooltip.
* `offset`: Offset relative to the view object in which it was declared. In this object, you can declare the `x` and `y` offsets as well as their units of measurement.
* `close_by_tap_outside`: Boolean that allows dismissing tooltip by tapping outside of it. Default value is `true`.
* `tap_outside_actions`: Array of actions that will be triggered when tapping outside the tooltip.
* `is_modal`: Boolean that defines the modality of the tooltip. If `true`, the tooltip will intercept system gestures (e.g., the "Back" gesture on Android). Default value is `false`.

{% cut "Example of an `offset`" %}

```json
"offset": {
  "x": {
    "value": 40,
    "unit": "px"
  },
  "y": {
    "value": 40,
    "unit": "px"
  }
}
```

{% endcut %}

{% cut "Example of tooltip with tap outside properties" %}

```json
"tooltips": [{
  "id": "example_tooltip",
  "div": {
    "type": "text",
    "text": "This is a tooltip that won't close when tapping outside"
  },
  "position": "bottom",
  "close_by_tap_outside": false,
  "tap_outside_actions": [{
    "log_id": "tap_outside_tooltip",
    "url": "div-action://log?message=Tapped outside tooltip"
  }]
}]
```

{% endcut %}

## Controls

* `div-action://show_tooltip?id=<tooltip_id>`: Show tooltip.
* `div-action://hide_tooltip?id=<tooltip_id>`: Hide tooltip.

You can call it from any layout element. `id`: Tooltip ID that you declared in the layout.

<!-- source: en/_includes/index/troubleshooting.md -->
## Learn more {#troubleshooting}

You can discuss topics of interest in the DivKit user community in Telegram: [https://t.me/divkit_community_en](https://t.me/divkit_community_en).



[DivKit Repository](https://github.com/divkit/divkit)
<!-- endsource: en/_includes/index/troubleshooting.md -->