Всплывающая подсказка

Всплывающая подсказка показывает подробности о записи данных при наведении. В отдельном представлении Vega-Lite она может формироваться по полям кодирования, по всем полям исходной записи или задаваться явно через канал tooltip.

По умолчанию средство отрисовки создаёт подсказки с помощью стандартного атрибута HTML title. Обработчик Vega Tooltip позволяет создавать оформленные подсказки HTML.

По полям кодирования

Значение true свойства tooltip в определении примитива или конфигурации включает стандартную подсказку на основе всех полей, указанных в encoding.

Примечание: это равнозначно "tooltip": {"content": "encoding"} в определении примитива.

Чтобы исключить поле из подсказки, созданной по кодированию, и сохранить его для группировки, выбора или другого канала, задайте tooltip: false внутри определения поля:

{
  "mark": {"type": "point", "tooltip": true},
  "encoding": {
    "x": {"field": "Horsepower", "type": "quantitative"},
    "detail": {"field": "disabledTooltip", "type": "nominal", "tooltip": false}
  }
}

По исходной записи

"tooltip": {"content": "data"} в объекте mark показывает все поля записи данных:

Канал `tooltip`

Канал tooltip можно связать с полем данных. Например, эта столбчатая диаграмма поддерживает подсказки для поля b. Наведите указатель на столбец: простая подсказка покажет значение поля b для этого столбца.

Для нескольких полей передайте массив определений. Vega Tooltip покажет таблицу с названиями и значениями:

Другой способ — вычислить новое поле, соединяющее нужные значения, и указать его в одном определении. Свойство title меняет отображаемое название поля:

Поле подсказки без агрегата участвует в группировке данных. Ниже добавление поля b изменяет состав групп, поэтому появляется отдельный штрих для каждой уникальной даты:

Чтобы не менять группировку, агрегируйте поле в канале tooltip:

Определения полей в массиве подсказки могут содержать предикат filter, исключающий отдельные поля, значения которых не проходят фильтр. Предикат проверяется относительно самого поля подсказки и не должен содержать свойства field и timeUnit. Например, {"field": "validTooltip", "filter": {"valid": true}} включает поле validTooltip только тогда, когда его значение не равно null и не является NaN, а {"filter": {"not": {"equal": 0}}} исключает поле с нулевым значением. Отфильтрованные поля исключаются также из автоматически создаваемого описания ARIA description примитива, как и поля с "tooltip": false.

Изображение в подсказке

Для отображения изображения в подсказке используйте обработчик Vega Tooltip. Он требует специального имени поля image: значения этого поля отображаются как изображения, а не как текст. Такую подсказку можно задать свойством tooltip определения примитива, как описано выше, или передать поле в массиве канала tooltip, как в следующем примере:

Помимо пути к изображению, Vega Tooltip поддерживает изображения в кодировке base64 с префиксом data:image/png;base64,, аналогично их отображению в тегах изображений HTML. Максимальные размеры картинки в подсказке задаются CSS-свойствами max-width и max-height для селектора #vg-tooltip-element img.

Отключение подсказок

Для одного представления укажите tooltip: null в объекте примитива:

{
  "mark": {"type": ..., "tooltip": null, ...},
  "encoding": ...,
  ...
}

Или задайте null в канале:

{
  "mark": ...,
  "encoding": {
    "tooltip": null
  },
  ...
}

Чтобы отключить все подсказки, задайте это в конфигурации:

"config": {
  "mark": {"tooltip": null}
}

Обработчик Vega Tooltip

Для дополнительной настройки подсказки можно задать собственный обработчик событий через tooltipHandler в Vega View API. Vega вызывает обработчик при каждом появлении подсказки.

Vega Tooltip — обработчик, создающий настраиваемые подсказки HTML. Ниже показана визуализация Vega-Lite с этим обработчиком. Vega Tooltip поставляется вместе с Vega Embed, поэтому, возможно, вы уже используете его.

Без Vega Tooltip используется стандартный атрибут браузера title. Для его появления после наведения может понадобиться небольшая пауза: