Постоянные и временные tooltip

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

Механика tooltip в Leaflet строится вокруг метода bindTooltip, который закрепляет подсказку за слоем карты и управляет её жизненным циклом через внутренний слой Tooltip.

Базовое создание tooltip

Tooltip создаётся через привязку к объекту слоя:

marker.bindTooltip("Точка интереса");

После этого tooltip появляется при наведении мыши (поведение по умолчанию зависит от платформы и типа устройства).

Эквивалентная запись с настройками:

marker.bindTooltip("Точка интереса", {
  direction: "top",
  offset: [0, -10],
  opacity: 0.9
});

Основные параметры:

  • direction — направление отображения относительно объекта:

    • top
    • bottom
    • left
    • right
    • center
    • auto

  • offset — смещение относительно точки привязки

  • opacity — прозрачность

  • className — CSS-класс для стилизации

  • interactive — возможность взаимодействия с tooltip

Разница между временными и постоянными tooltip

Tooltip в Leaflet делятся на два основных режима поведения:

Временный tooltip (по умолчанию)

Временный tooltip появляется при наведении курсора или при событии mouseover, и исчезает при mouseout.

Пример:

marker.bindTooltip("Временная подсказка");

Поведение:

  • отображается при наведении
  • исчезает при уходе курсора
  • не фиксируется на карте
  • используется для вспомогательной информации

Постоянный tooltip

Постоянный tooltip отображается всегда, независимо от событий мыши. Он закреплён за объектом и ведёт себя как статическая подпись.

marker.bindTooltip("Постоянная подпись", {
  permanent: true
});

Особенности постоянного режима:

  • не зависит от hover-событий
  • всегда видим на карте
  • часто используется для подписей объектов
  • увеличивает визуальную нагрузку при большом количестве слоёв

Управление отображением tooltip через API

Tooltip можно контролировать программно:

marker.openTooltip();
marker.closeTooltip();

Если tooltip привязан, но не отображается, его можно принудительно открыть:

marker.openTooltip();

И закрыть вручную:

marker.closeTooltip();

Sticky tooltip: поведение следования за курсором

Опция sticky изменяет поведение временного tooltip: он начинает следовать за курсором внутри слоя.

marker.bindTooltip("Следует за курсором", {
  sticky: true
});

Поведение sticky режима:

  • tooltip перемещается вместе с курсором
  • исчезает при выходе из слоя
  • полезен для плотных карт с интерактивными зонами

Tooltip для GeoJSON объектов

Tooltip часто применяется к слоям GeoJSON:

L.geoJSON(data, {
  onEachFeature: function (feature, layer) {
    layer.bindTooltip(feature.properties.name);
  }
}).addTo(map);

При работе с GeoJSON tooltip обычно формируется динамически из свойств объекта.

Динамическое обновление содержимого tooltip

Содержимое tooltip можно менять без повторного bind:

marker.setTooltipContent("Новое значение");

Также возможно обновление через повторный bind:

marker.bindTooltip("Обновлённый текст");

Первый вариант предпочтительнее, так как не пересоздаёт слой.

Tooltip и события мыши

Leaflet позволяет управлять поведением tooltip через события:

marker.on("mouseover", function () {
  this.openTooltip();
});

marker.on("mouseout", function () {
  this.closeTooltip();
});

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

Интерактивные tooltip

При включении interactive: true tooltip начинает реагировать на события мыши.

marker.bindTooltip("Интерактивный tooltip", {
  interactive: true
});

Особенности:

  • tooltip не закрывается при наведении на него самого
  • можно размещать внутри HTML-контент
  • поддерживается кликабельность элементов

Пример HTML tooltip:

marker.bindTooltip(`
  <div>
    <b>Объект</b><br>
    <button oncl ick="alert('click')">Действие</button>
  </div>
`, {
  interactive: true
});

Стилизация tooltip через CSS

Tooltip можно стилизовать через класс className:

marker.bindTooltip("Стилизованный tooltip", {
  className: "custom-tooltip"
});

CSS:

.custom-tooltip {
  background: #1e1e1e;
  color: #fff;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
}

Также можно переопределить стандартные классы Leaflet:

  • .leaflet-tooltip
  • .leaflet-tooltip-top
  • .leaflet-tooltip-bottom

Tooltip и масштаб карты

Tooltip автоматически пересчитывает позицию при:

  • zoom
  • pan
  • resize карты

Однако при частом обновлении данных важно учитывать производительность:

  • большое количество permanent tooltip снижает FPS
  • лучше использовать clustering или условное отображение

Tooltip и слои с высокой плотностью данных

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

if (map.getZoom() > 12) {
  layer.bindTooltip(feature.name, { permanent: true });
} else {
  layer.unbindTooltip();
}

Такой подход снижает визуальный шум и нагрузку на DOM.

Удаление tooltip

Tooltip можно полностью отвязать:

marker.unbindTooltip();

После этого слой перестаёт хранить tooltip и освобождает ресурсы.

Tooltip и мобильные устройства

На сенсорных устройствах hover отсутствует, поэтому Leaflet адаптирует поведение:

  • tooltip может открываться по tap
  • sticky режим часто заменяет hover-логику
  • permanent tooltip становится основным способом отображения подписей

Внутренняя модель работы tooltip

Tooltip в Leaflet реализован как отдельный DOM-элемент, который:

  • создаётся при первом открытии
  • позиционируется через координаты слоя
  • обновляется при изменении карты
  • удаляется при closeTooltip и unbindTooltip

Каждый tooltip связан с конкретным Layer, но рендерится в общем контейнере карты (mapPane), что обеспечивает синхронизацию всех слоёв.

Комбинация tooltip и popup

Tooltip часто используется совместно с popup:

marker.bindTooltip("Кратко");
marker.bindPopup("Подробная информация");

Типичный сценарий:

  • tooltip — быстрый preview
  • popup — подробные данные

При этом popup имеет более высокий z-index и блокирует взаимодействие с картой при открытии.

Управление поведением через опции слоя

Tooltip тесно связан с параметрами слоя:

  • riseOnHover влияет на перекрытие tooltip
  • opacity tooltip не зависит от opacity слоя
  • pane может менять порядок отображения

Производственные практики использования tooltip

В больших картах tooltip используется с ограничениями:

  • permanent tooltip только для ключевых объектов
  • временные tooltip для интерактивных слоёв
  • отключение tooltip при низких уровнях zoom
  • минимизация HTML внутри tooltip

Эти ограничения позволяют сохранять стабильную производительность при тысячах объектов на карте.

Оглавление