Tooltips

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

View an interactive example

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.
  • mode: Object that defines the modality of the tooltip. Its type can be modal or non_modal. Modal tooltips intercept system gestures (e.g., the "Back" gesture on Android). Default value is {"type": "modal"}.
Example of an offset
"offset": {
  "x": {
    "value": 40,
    "unit": "px"
  },
  "y": {
    "value": 40,
    "unit": "px"
  }
}
Example of tooltip with tap outside properties
"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"
  }]
}]

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.

Note

Accessibility and interaction with elements behind the tooltip

The tooltip's behavior regarding elements behind it depends on the mode parameter:

  • Modal tooltips ("mode": {"type": "modal"}) — prevent touches outside the tooltip's content from reaching underlying interface elements. These elements are also not accessible to screen readers.
  • Non-modal tooltips ("mode": {"type": "non_modal"}) — allow touches outside the tooltip's content to pass through to underlying interface elements. These elements remain accessible to screen readers.

Learn more

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

DivKit Repository

Previous
Video
Next
Actions with elements