Tooltips

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

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.

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

"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.

Learn more

Follow DivKit news in the Telegram channel: http://t.me/divkit_news

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

DivKit Repository