Канал tooltip

Канал tooltip отвечает за отображение контекстной информации при наведении курсора на визуальный элемент. В терминах декларативной визуализации он не влияет на геометрию графика, но расширяет семантическую насыщенность марки. Tooltip связывает визуальный объект с набором данных, которые становятся доступны пользователю в момент взаимодействия.

В отличие от каналов положения (x, y), цвета или размера, tooltip относится к интерактивным каналам, активируемым событием pointerover. Его задача — предоставление дополнительных атрибутов без перегрузки основного графика.

В Vega-Lite tooltip задаётся через encoding как одно поле или набор полей. Канал поддерживает несколько форматов: строковый, объектный и массивный.

Простейшая форма

{
  "mark": "circle",
  "encoding": {
    "x": {"field": "x", "type": "quantitative"},
    "y": {"field": "y", "type": "quantitative"},
    "tooltip": {"field": "category", "type": "nominal"}
  }
}

В этом случае tooltip показывает значение одного поля. При наведении на точку будет отображено значение category.

Чаще используется расширенный формат, позволяющий отображать несколько значений одновременно:

{
  "mark": "bar",
  "encoding": {
    "x": {"field": "year", "type": "ordinal"},
    "y": {"field": "value", "type": "quantitative"},
    "tooltip": [
      {"field": "year", "type": "ordinal"},
      {"field": "value", "type": "quantitative"},
      {"field": "region", "type": "nominal"}
    ]
  }
}

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

Tooltip поддерживает форматирование через параметр format внутри field definition. Это особенно важно для числовых и временных данных.

{
  "tooltip": [
    {
      "field": "value",
      "type": "quantitative",
      "format": ".2f"
    },
    {
      "field": "date",
      "type": "temporal",
      "format": "%Y-%m-%d"
    }
  ]
}

Форматирование применяется на уровне спецификации и не требует дополнительной логики в JavaScript.

В случае использования агрегатов tooltip часто становится основным носителем информации, так как визуальные элементы представляют обобщённые значения.

{
  "mark": "bar",
  "encoding": {
    "x": {"field": "category", "type": "nominal"},
    "y": {"aggregate": "sum", "field": "amount", "type": "quantitative"},
    "tooltip": [
      {"field": "category", "type": "nominal"},
      {"aggregate": "sum", "field": "amount", "type": "quantitative"}
    ]
  }
}

Здесь tooltip синхронизирован с трансформацией данных: он отображает уже агрегированное значение, а не исходные записи.

Vega предоставляет более гибкую модель через encode блоки. Tooltip задаётся как часть визуального маркера, обычно через property tooltip или через текстовое свойство title.

{
  "type": "symbol",
  "encode": {
    "enter": {
      "x": {"field": "x"},
      "y": {"field": "y"},
      "fill": {"value": "steelblue"},
      "tooltip": {"signal": "datum.category + ': ' + datum.value"}
    }
  }
}

В Vega tooltip часто реализуется через expression language или signal, что позволяет динамически формировать содержимое.

В Vega существует альтернативный механизм — свойство title, которое работает как HTML tooltip по умолчанию в SVG-рендере.

{
  "type": "rect",
  "encode": {
    "enter": {
      "x": {"field": "x0"},
      "x2": {"field": "x1"},
      "y": {"field": "y"},
      "height": {"value": 10},
      "fill": {"value": "orange"},
      "title": {"field": "label"}
    }
  }
}

Этот подход менее гибкий, но проще для базовых сценариев.

Tooltip активируется через события pointer:

pointerover — отображение tooltip
pointermove — обновление позиции и содержимого
pointerout — скрытие tooltip

Vega и Vega-Lite абстрагируют эти события, но поведение остаётся одинаковым на уровне runtime.

Tooltip может комбинировать значения из нескольких полей и трансформаций. Это особенно важно при использовании lookup и join трансформаций.

{
  "transform": [
    {
      "lookup": "id",
      "from": {
        "data": {"name": "details"},
        "key": "id",
        "fields": ["name", "score"]
      }
    }
  ],
  "mark": "point",
  "encoding": {
    "x": {"field": "x", "type": "quantitative"},
    "y": {"field": "y", "type": "quantitative"},
    "tooltip": [
      {"field": "name", "type": "nominal"},
      {"field": "score", "type": "quantitative"}
    ]
  }
}

Tooltip становится агрегатором данных из разных источников без изменения визуального слоя.

Vega-Lite поддерживает условные выражения внутри tooltip через condition.

{
  "tooltip": {
    "condition": {
      "test": "datum.value > 100",
      "field": "value",
      "type": "quantitative"
    },
    "value": "Below threshold"
  }
}

Это позволяет динамически менять содержимое tooltip в зависимости от состояния данных.

Tooltip часто используется совместно с selection-механизмами. Хотя сам tooltip не является selection, он может зависеть от него через conditional encoding.

{
  "selection": {
    "highlight": {"type": "single", "on": "mouseover"}
  },
  "mark": "circle",
  "encoding": {
    "opacity": {
      "condition": {"selection": "highlight", "value": 1},
      "value": 0.3
    },
    "tooltip": [
      {"field": "name"},
      {"field": "value"}
    ]
  }
}

Здесь tooltip остаётся стабильным, но поведение визуального выделения влияет на восприятие данных.

Temporal данные требуют особого подхода, так как Vega использует внутренние представления дат.

{
  "tooltip": [
    {
      "field": "timestamp",
      "type": "temporal",
      "format": "%H:%M:%S"
    }
  ]
}

Форматирование осуществляется через d3-time-format, интегрированный в Vega runtime.

При большом количестве элементов tooltip становится частью критического пути взаимодействия. Основные факторы влияния:

количество полей в tooltip
наличие вычисляемых выражений
использование lookup трансформаций
частота pointermove событий

В Vega-Lite оптимизация происходит через предвычисление данных на этапе трансформаций, тогда как Vega оставляет больше вычислений на runtime.

Сигналы позволяют формировать tooltip на основе глобального состояния.

{
  "signals": [
    {
      "name": "tooltip",
      "value": {},
      "on": [
        {
          "events": "symbol:mouseover",
          "update": "datum"
        },
        {
          "events": "symbol:mouseout",
          "update": "{}"
        }
      ]
    }
  ]
}

Далее tooltip может отображаться через отдельный текстовый слой, связанный с сигналом.

Характеристика	Vega-Lite	Vega
Уровень абстракции	Высокий	Низкий
Способ задания	encoding.tooltip	encode + signals
Форматирование	встроенное	через выражения
Гибкость	ограниченная	полная
Сложные интеракции	через selection	через events/signals

В facet и repeat-графиках tooltip наследует контекст подграфика.

{
  "facet": {
    "row": {"field": "region"}
  },
  "spec": {
    "mark": "bar",
    "encoding": {
      "x": {"field": "category"},
      "y": {"field": "value"},
      "tooltip": [
        {"field": "category"},
        {"field": "value"},
        {"field": "region"}
      ]
    }
  }
}

Tooltip автоматически включает информацию о текущем facet-контексте.

Несмотря на гибкость, tooltip имеет ряд ограничений:

отсутствие сложной HTML-разметки в Vega-Lite
ограниченная кастомизация поведения в декларативном слое
невозможность полноценного UI внутри tooltip без перехода к Vega
зависимость от браузерного event loop

Типовые паттерны использования

отображение всех полей точки в scatter plot
вывод агрегированных значений в bar chart
пояснение категорий в heatmap
показ временных меток в time series

Tooltip в этих случаях выполняет роль семантического расширения визуального кодирования, не нарушая основную структуру графика.

Канал tooltip

Назначение tooltip как канала визуализации

Базовая модель tooltip в Vega-Lite

Простейшая форма

Tooltip как массив полей

Форматирование значений tooltip

Tooltip и агрегированные данные

Tooltip в Vega (низкоуровневый слой)

Пример Vega-марка с tooltip

Использование title как альтернативы tooltip

Поведение tooltip при взаимодействии

Множественные источники данных в tooltip

Условные tooltip (conditional encoding)

Tooltip и взаимодействие с selection

Tooltip и форматирование времени

Производительность tooltip

Динамический tooltip через signal (Vega)

Различия tooltip в Vega и Vega-Lite

Tooltip в составных визуализациях

Ограничения tooltip-канала

Типовые паттерны использования