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.
Example of an offset
"offset": {
  "x": {
    "value": 40,
    "unit": "px"
  },
  "y": {
    "value": 40,
    "unit": "px"
  }
}

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