Клик мышью

Tippy.js — это мощная библиотека для создания всплывающих подсказок и тултипов на элементах веб-страницы. Одним из наиболее часто используемых событий является клик мышью. В Tippy.js это настраивается с помощью опции trigger.

tippy('#button', {
  content: 'Пример подсказки при клике',
  trigger: 'click',
});

В данном примере подсказка отображается только при клике на элемент с идентификатором button. Значение trigger может быть строкой с несколькими событиями, разделёнными пробелами, например: 'mouseenter click'.

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

Позиционирование тултипа

Tippy.js использует Popper.js для позиционирования. Можно задавать позицию относительно элемента:

tippy('#button', {
  content: 'Содержимое тултипа',
  trigger: 'click',
  placement: 'right', // top, bottom, left, right, auto
});

Опция placement определяет, где появится подсказка относительно элемента. Значение auto позволяет библиотеке выбирать оптимальное положение в зависимости от доступного пространства.

Задержка появления и скрытия

Для более плавного UX можно настроить задержку:

tippy('#button', {
  content: 'Тултип с задержкой',
  trigger: 'click',
  delay: [100, 200], // [появление, скрытие] в миллисекундах
});

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

Анимации при открытии и закрытии

Tippy.js поддерживает встроенные анимации, которые делают взаимодействие более визуально приятным:

tippy('#button', {
  content: 'Тултип с анимацией',
  trigger: 'click',
  animation: 'scale', // scale, fade, shift-away, shift-toward
  duration: [200, 300], // [время появления, время скрытия] в мс
});

Управление состоянием тултипа через API

Tippy.js предоставляет методы для программного контроля:

const instance = tippy('#button', {
  content: 'Контроль через API',
  trigger: 'click',
});

// Открытие вручную
instance.show();

// Закрытие вручную
instance.hide();

// Переключение состояния
instance.toggle();

Это особенно полезно, когда клик должен не просто показывать подсказку, но и выполнять дополнительные действия на странице.

Вложенные клики и закрытие подсказок

hideOnClick

Опция hideOnClick управляет поведением при повторном клике:

tippy('#button', {
  content: 'Тултип закрывается при клике',
  trigger: 'click',
  hideOnClick: true, // true, false или 'toggle'
});
  • true — подсказка закрывается при клике на элемент.
  • false — подсказка остаётся открытой после клика.
  • 'toggle' — переключает состояние подсказки при каждом клике.

Клики вне элемента

Чтобы тултип закрывался при клике вне элемента, используется interactive:

tippy('#button', {
  content: 'Тултип с интерактивной областью',
  trigger: 'click',
  interactive: true,
});

Это позволяет взаимодействовать с содержимым тултипа (кнопки, ссылки) без мгновенного закрытия.

Использование делегирования для динамических элементов

Если элементы создаются динамически, можно использовать делегирование через контейнер:

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

Все элементы с классом .dynamic-button будут автоматически получать подсказку при клике, даже если они добавлены после инициализации скрипта.

Настройка HTML-контента в тултипах

Tippy.js позволяет использовать не только текст, но и полноценный HTML:

tippy('#button', {
  content: '<strong>Жирный текст</strong><br>Дополнительная информация',
  allowHTML: true,
  trigger: 'click',
});

При этом allowHTML: true обязательна, иначе HTML будет экранирован и отображён как обычный текст.

Примеры сложных сценариев

Клик + hover

Можно комбинировать события для более гибкого UX:

tippy('#button', {
  content: 'Появление при клике или наведении',
  trigger: 'click mouseenter',
});

Группировка подсказок

При наличии нескольких тултипов на странице можно управлять ими централизованно:

const buttons = document.querySelectorAll('.button');
buttons.forEach(btn => {
  tippy(btn, {
    content: `Тултип для ${btn.textContent}`,
    trigger: 'click',
    hideOnClick: 'toggle',
  });
});

Это упрощает поддержку и согласованность поведения на больших интерфейсах.

Эти возможности делают Tippy.js гибким инструментом для реализации кликабельных подсказок любого уровня сложности. Конфигурация через trigger, API-методы, интерактивность и делегирование позволяют создавать как простые всплывающие подсказки, так и полноценные интерактивные интерфейсы с динамическим контентом.

Оглавление