Tooltip: создание и отличия от popup

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

Основное назначение tooltip — быстрое контекстное пояснение объекта без блокировки интерфейса карты и без необходимости активного взаимодействия.

Создание tooltip

Tooltip в Leaflet создаётся через метод bindTooltip, который применяется к любому векторному или маркерному слою.

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

В результате текст привязывается к маркеру и отображается при взаимодействии с ним.

Tooltip может применяться к:

  • маркерам (L.marker)
  • линиям (L.polyline)
  • полигонам (L.polygon)
  • геометрическим слоям (L.circle, L.rectangle)
L.polygon(latlngs)
  .bindTooltip("Граница района")
  .addTo(map);

Варианты передачи содержимого

Tooltip поддерживает как строковый, так и HTML-контент.

marker.bindTooltip("<b>Объект</b><br>Описание");

HTML внутри tooltip интерпретируется браузером, что позволяет формировать структурированные подписи с акцентами и разметкой.

Параметры конфигурации tooltip

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

marker.bindTooltip("Текст", {
  direction: "top",
  offset: [0, -10],
  opacity: 0.9,
  permanent: false,
  sticky: false
});

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

direction Определяет расположение tooltip относительно слоя:

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

auto позволяет Leaflet автоматически выбирать положение в зависимости от границ карты.

offset Смещение tooltip относительно точки привязки:

offset: [10, -20]

Используется для точной корректировки положения при наложении элементов интерфейса.

opacity Прозрачность tooltip:

opacity: 0.7

Позволяет визуально интегрировать подпись в карту без перегрузки интерфейса.

permanent Определяет постоянное отображение tooltip:

permanent: true

В этом режиме tooltip отображается всегда, независимо от взаимодействия.

sticky Закрепляет tooltip за курсором:

sticky: true

При перемещении курсора tooltip следует за ним, оставаясь привязанным к объекту.

Открытие и закрытие tooltip вручную

Tooltip можно управлять программно:

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

Также доступна проверка состояния:

marker.isTooltipOpen();

Отличия tooltip и popup

Tooltip и popup в Leaflet выполняют разные функции и отличаются по поведению и уровню взаимодействия.

Popup представляет собой более тяжёлый интерфейсный элемент:

  • открывается по клику
  • перекрывает часть карты
  • поддерживает сложный контент
  • требует явного закрытия
marker.bindPopup("Подробная информация");

Tooltip

Tooltip — облегчённый вариант:

  • появляется по hover или focus
  • не блокирует карту
  • используется для кратких подписей
  • исчезает автоматически

Сравнение поведения

Popup:

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

Tooltip:

  • реактивен к наведению
  • кратковременный
  • используется для контекста

Различие в назначении

Popup ориентирован на взаимодействие и детализацию данных, tooltip — на навигационную подсказку и визуальную идентификацию объектов без перегрузки интерфейса.

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

На сенсорных экранах отсутствует hover-событие, поэтому tooltip эмулируется через:

  • focus на элементе
  • tap (касание)
  • удержание (в зависимости от браузера)

Sticky-режим часто используется для повышения читаемости на мобильных устройствах.

Tooltip для различных геометрий

Tooltip может применяться не только к маркерам.

Линии

L.polyline(latlngs).bindTooltip("Маршрут");

Tooltip привязывается к центру линии или ближайшей точке взаимодействия.

Полигоны

L.polygon(latlngs).bindTooltip("Зона покрытия");

Tooltip отображается внутри или рядом с границей полигона.

Круги

L.circle([51.5, -0.09], 500).bindTooltip("Радиус зоны");

Стилизация tooltip

Tooltip можно стилизовать через CSS-классы.

marker.bindTooltip("Объект", {
  className: "custom-tooltip"
});

CSS:

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

Также доступна настройка стандартных классов Leaflet:

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

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

Tooltip можно изменять без пересоздания слоя:

marker.setTooltipContent("Новый текст");

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

События tooltip

Tooltip поддерживает набор событий:

  • tooltipopen
  • tooltipclose
marker.on("tooltipopen", function () {
  console.log("tooltip открыт");
});

Эти события позволяют синхронизировать поведение интерфейса с состоянием подсказок.

Поведение при наложении слоёв

При плотном расположении объектов tooltip может перекрывать другие элементы карты. Для управления этим применяются:

  • direction: auto
  • корректировка offset
  • использование sticky
  • динамическое изменение z-index через CSS

Связка tooltip с данными

Tooltip часто используется как минимальный слой визуализации данных:

  • числовые показатели
  • названия объектов
  • краткие метки состояния
  • идентификаторы объектов

При этом tooltip не предназначен для отображения сложной структуры данных, таблиц или интерактивных форм.

Разделение ролей tooltip и popup в архитектуре карты

В интерфейсах на основе Leaflet tooltip обычно используется как первый уровень информации, тогда как popup выступает вторым уровнем детализации.

Типичная схема:

  • tooltip → быстрый контекст
  • popup → расширенные данные
  • внешний интерфейс → аналитика и управление слоями

Такое разделение снижает нагрузку на карту и упрощает восприятие геоданных без перегрузки интерфейса.

Оглавление