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

# div-tooltip
Tooltip.

## Parameters
| Parameters | Description |
| --- | --- |
| `div` | <p>**object**</p><p>Required parameter.</p><p>An element that will be shown in a tooltip. If there are tooltips inside an element, they won't be shown.</p><p>The value has the type `div`.</p><p>Available platforms: Android, iOS, web.</p><p>List of possible values:<li>[div-image](div-image.md#div-image)</li><li>[div-gif-image](div-gif-image.md#div-gif-image)</li><li>[div-text](div-text.md#div-text)</li><li>[div-separator](div-separator.md#div-separator)</li><li>[div-container](div-container.md#div-container)</li><li>[div-grid](div-grid.md#div-grid)</li><li>[div-gallery](div-gallery.md#div-gallery)</li><li>[div-pager](div-pager.md#div-pager)</li><li>[div-tabs](div-tabs.md#div-tabs)</li><li>[div-state](div-state.md#div-state)</li><li>[div-custom](div-custom.md#div-custom)</li><li>[div-indicator](div-indicator.md#div-indicator)</li><li>[div-slider](div-slider.md#div-slider)</li><li>[div-switch](div-switch.md#div-switch)</li><li>[div-input](div-input.md#div-input)</li><li>[div-select](div-select.md#div-select)</li><li>[div-video](div-video.md#div-video)</li></p> |
| `id` | <p>**string**</p><p>Required parameter.</p><p>Tooltip ID. It is used to avoid re-showing. It must be unique for all element tooltips.</p><p>Available platforms: Android, iOS, web.</p> |
| `position` | <p>**string**</p><p>Required parameter.</p><p>The position of a tooltip relative to an element it belongs to.</p><p>Possible values: `left`, `top-left`, `top`, `top-right`, `right`, `bottom-right`, `bottom`, `bottom-left`, `center`.</p><p>Available platforms: Android, iOS, web.</p> |
| `animation_in` | <p>**object**</p><p>Tooltip appearance animation. By default, the tooltip will be appearing gradually with an offset from the anchor point by 10 dp.</p><p>The value has the type `div-animation`.</p><p>Available platforms: Android, iOS, web.</p> |
| `animation_out` | <p>**object**</p><p>Tooltip disappearance animation. By default, the tooltip will disappear gradually with an offset from the anchor point by 10 dp.</p><p>The value has the type `div-animation`.</p><p>Available platforms: Android, iOS, web.</p> |
| `background_accessibility_description` | <p>**string**</p><p>Description for accessibility of the tap action on the background of the tooltip.</p><p>Available platforms: iOS, web.</p> |
| `bring_to_top_id` | <p>**string**</p><p>An element that will be brought to the top of the substrate.</p><p>Available platforms: Android, iOS, web.</p> |
| `close_by_tap_outside` | <p>**bool**</p><p>Allows dismissing tooltip by tapping outside of it.</p><p>Default value: `true`.</p><p>Available platforms: Android, iOS, web.</p> |
| `duration` | <p>**int**</p><p>Duration of the tooltip visibility in milliseconds. When the value is set to `0`, the tooltip will be visible until the user hides it.</p><p>Restriction for the value `x`: `x >= 0`.</p><p>Default value: `5000`.</p><p>Available platforms: Android, iOS, web.</p> |
| `mode` | <p>**object**</p><p>Tooltip modes.</p><p>The value has the type `div-tooltip-mode`.</p><p>Default value: `{ "type": "modal" }`.</p><p>Available platforms: Android, iOS, web.</p><p>List of possible values:<li>[div-tooltip-mode-non-modal](div-tooltip-mode-non-modal.md#div-tooltip-mode-non-modal)</li><li>[div-tooltip-mode-modal](div-tooltip-mode-modal.md#div-tooltip-mode-modal)</li></p> |
| `offset` | <p>**object**</p><p>Shift relative to an anchor point.</p><p>The value has the type `div-point`.</p><p>Available platforms: Android, iOS, web.</p> |
| `substrate_div` | <p>**object**</p><p>An element that will be used as a substrate for the tooltip.</p><p>The value has the type `div`.</p><p>Available platforms: web, Android, iOS.</p><p>List of possible values:<li>[div-image](div-image.md#div-image)</li><li>[div-gif-image](div-gif-image.md#div-gif-image)</li><li>[div-text](div-text.md#div-text)</li><li>[div-separator](div-separator.md#div-separator)</li><li>[div-container](div-container.md#div-container)</li><li>[div-grid](div-grid.md#div-grid)</li><li>[div-gallery](div-gallery.md#div-gallery)</li><li>[div-pager](div-pager.md#div-pager)</li><li>[div-tabs](div-tabs.md#div-tabs)</li><li>[div-state](div-state.md#div-state)</li><li>[div-custom](div-custom.md#div-custom)</li><li>[div-indicator](div-indicator.md#div-indicator)</li><li>[div-slider](div-slider.md#div-slider)</li><li>[div-switch](div-switch.md#div-switch)</li><li>[div-input](div-input.md#div-input)</li><li>[div-select](div-select.md#div-select)</li><li>[div-video](div-video.md#div-video)</li></p> |
| `tap_outside_actions` | <p>**array**</p><p>Specifies actions triggered by tapping outside the tooltip.</p><p>Available platforms: Android, iOS, web.</p> |

<details>
<summary>JSON</summary>

```json
{
  animation_in: {
    duration: "int",
    end_value: "number",
    interpolator: "string",
    items: [ div-animation, ... ],
    name*: "string",
    repeat: div-count,
    start_delay: "int",
    start_value: "number"
  },
  animation_out: {
    duration: "int",
    end_value: "number",
    interpolator: "string",
    items: [ div-animation, ... ],
    name*: "string",
    repeat: div-count,
    start_delay: "int",
    start_value: "number"
  },
  background_accessibility_description: "string",
  bring_to_top_id: "string",
  close_by_tap_outside: "bool",
  div*: div,
  duration: "int",
  id*: "string",
  mode: div-tooltip-mode,
  offset: {
    x*: {
      unit: "string",
      value*: "number"
    },
    y*: {
      unit: "string",
      value*: "number"
    }
  },
  position*: "string",
  substrate_div: div,
  tap_outside_actions: [
    {
      download_callbacks: {
        on_fail_actions: [ div-action, ... ],
        on_success_actions: [ div-action, ... ]
      },
      is_enabled: "bool_int",
      log_id*: "string",
      log_url: "string",
      menu_items: [
        {
          action: div-action,
          actions: [ div-action, ... ],
          text*: "string"
        },
        ...
      ],
      payload: "object",
      referer: "string",
      scope_id: "string",
      target: "string",
      typed: div-action-typed,
      url: "string"
    },
    ...
  ]
}
```
</details>