Нативные возможности vs тултипы

Tippy.js — это современная библиотека для создания всплывающих подсказок (tooltip) в веб-приложениях на JavaScript. Она построена на базе Popper.js и обеспечивает гибкое позиционирование, динамическое обновление содержимого и широкие возможности кастомизации. В отличие от нативного title элемента HTML, Tippy.js позволяет создавать интерактивные, анимированные и программно управляемые подсказки.

Ключевой концепт Tippy.js — это инициализация на элементе DOM с передачей параметров конфигурации. Простейший пример:

tippy('#myButton', {
  content: 'Это подсказка',
  placement: 'right',
});

Здесь #myButton — селектор элемента, content — текст подсказки, placement — положение относительно элемента (top, bottom, left, right).

Отличие от нативных подсказок

Нативные подсказки (title)

  • Появляются автоматически при наведении на элемент с атрибутом title.
  • Не поддерживают HTML-контент.
  • Нельзя управлять поведением через JavaScript (кроме изменения атрибута).
  • Ограниченные возможности стилизации и анимации.
  • В ряде браузеров отображаются по-разному, что нарушает визуальную консистентность.

Tippy.js

  • Поддерживает HTML-контент, включая кнопки, изображения и ссылки.
  • Полностью управляется через JavaScript, поддерживает события onShow, onHide, onMount.
  • Позволяет использовать кастомные анимации и тему оформления.
  • Работает одинаково во всех современных браузерах.
  • Поддерживает интерактивные подсказки, которые остаются видимыми при наведении на них.

Пример интерактивного тултипа с кнопкой:

tippy('#interactiveButton', {
  content: '<button oncl ick="alert(\'Клик!\')">Нажми меня</button>',
  allowHTML: true,
  interactive: true,
});

Управление поведением

Tippy.js предоставляет набор параметров для управления появлением и скрытием подсказок:

  • trigger — событие, вызывающее подсказку (mouseenter, click, focus, manual).
  • delay — задержка перед появлением и скрытием [show, hide].
  • duration — продолжительность анимации [show, hide].
  • interactive — разрешает взаимодействие с элементами внутри тултипа.
  • hideOnClick — определяет поведение при клике вне или внутри тултипа.
  • placement — положение относительно целевого элемента (top, bottom-start, right-end и т.д.).

Пример с задержкой и кастомным trigger:

tippy('#delayedButton', {
  content: 'Появляется через 500ms',
  delay: [500, 100],
  trigger: 'mouseenter focus',
});

Динамическое управление

Tippy.js поддерживает программное создание, изменение и уничтожение тултипов.

Создание программно:

const instance = tippy('#dynamicButton', {
  content: 'Динамическая подсказка',
});

Изменение контента:

instance.setContent('Новый текст подсказки');

Показ и скрытие:

instance.show();
instance.hide();

Удаление тултипа:

instance.destroy();

Анимации и стилизация

Tippy.js использует CSS-анимации, которые можно кастомизировать через класс animation:

tippy('#animatedButton', {
  content: 'С анимацией',
  animation: 'scale',
  theme: 'light-border',
});

Стандартные анимации:

  • fade
  • scale
  • shift-toward
  • perspective

С помощью кастомной темы можно полностью изменить внешний вид тултипа:

tippy('#customButton', {
  content: 'Кастомная тема',
  theme: 'my-theme',
});

В CSS:

.tippy-box.my-theme {
  background-color: #333;
  color: #fff;
  border-radius: 8px;
  font-size: 14px;
  padding: 8px 12px;
}

Контекстные различия

  • Нативные подсказки подходят для простых, однострочных описаний и не требуют JS. Используются там, где важна минимальная нагрузка на страницу.
  • Tippy.js необходим, когда нужна интерактивность, визуальное единообразие, сложное содержимое или контроль через скрипты.

Применение Tippy.js особенно полезно для:

  • Форма ввода с подсказками по полям.
  • Кнопки с дополнительными действиями.
  • Интерактивные графики или диаграммы.
  • Обеспечения единообразного UX в различных браузерах.

Интеграция с Popper.js

Tippy.js использует Popper.js под капотом для точного позиционирования. Это дает:

  • Автоматический выбор оптимальной позиции при ограниченном пространстве.
  • Смещение тултипа с учетом границ окна (boundary).
  • Поддержку смещений и отступов через опцию offset:
tippy('#offsetButton', {
  content: 'Сдвиг вниз на 10px',
  placement: 'bottom',
  offset: [0, 10],
});

Множественные тултипы и делегирование

Можно создавать тултипы для множества элементов с одинаковой конфигурацией:

tippy('.hasTooltip', {
  content: 'Общий контент',
});

Для динамически добавляемых элементов используют делегирование:

tippy.delegate(document.body, {
  target: '.dynamicTooltip',
  content: 'Динамический тултип',
});

Работа с событиями

Tippy.js поддерживает обработку жизненного цикла тултипа:

  • onShow(instance) — перед показом.
  • onShown(instance) — после появления.
  • onHide(instance) — перед скрытием.
  • onHidden(instance) — после скрытия.
  • onMount(instance) — после монтирования DOM.

Пример:

tippy('#eventButton', {
  content: 'События',
  onShow(instance) {
    console.log('Показываем тултип');
  },
  onHide(instance) {
    console.log('Скрываем тултип');
  },
});

Эта подробная структура демонстрирует, как Tippy.js расширяет стандартные возможности HTML-подсказок, предоставляя полный контроль над визуальной частью, поведением и интерактивностью.

Оглавление