Vanilla JavaScript подход

Tooltipster — это мощная библиотека для создания красивых и настраиваемых всплывающих подсказок. В подходе с Vanilla JavaScript работа ведется без зависимостей от jQuery, используя современные методы DOM и событий.

Инициализация Tooltipster

Для использования Tooltipster необходимо подключить CSS и JS файлы библиотеки. После подключения всплывающие подсказки можно инициализировать через Tooltipster конструктор. Пример:

import Tooltipster from 'tooltipster';

const tooltipElements = document.querySelectorAll('.tooltip');

tooltipElements.forEach(el => {
  new Tooltipster(el, {
    content: 'Пример подсказки',
    theme: 'tooltipster-default',
    animation: 'fade',
    delay: 200,
    interactive: true
  });
});

Ключевые моменты при инициализации:

  • content — текст или HTML-содержимое подсказки.
  • theme — тема оформления, которая задается через CSS.
  • animation — вид анимации появления подсказки (fade, grow, swing и др.).
  • delay — задержка перед показом подсказки в миллисекундах.
  • interactive — позволяет делать подсказку интерактивной (для кнопок, ссылок внутри).

Управление событиями

Tooltipster предоставляет методы для управления всплывающими подсказками после их создания:

const tooltipInstance = new Tooltipster(el, {
  content: 'Событийная подсказка'
});

// Показ подсказки
tooltipInstance.show();

// Скрытие подсказки
tooltipInstance.hide();

// Обновление содержимого
tooltipInstance.content('Новое содержимое');

// Уничтожение подсказки
tooltipInstance.destroy();

Методы show и hide полезны для программного контроля, когда подсказка должна появляться по событию, отличному от стандартного hover.

Настройка триггеров

По умолчанию Tooltipster активируется при наведении. Для использования других событий можно задать параметр trigger:

new Tooltipster(el, {
  content: 'Клик подсказка',
  trigger: 'click'
});

Доступные варианты trigger:

  • hover — при наведении мыши.
  • click — при клике.
  • custom — управление полностью вручную через методы show и hide.

Использование HTML-содержимого

Tooltipster поддерживает HTML внутри подсказок. Для этого достаточно передать DOM-элемент или HTML-строку:

const htmlContent = document.createElement('div');
htmlContent.innerHTML = `
  <strong>Заголовок</strong>
  <p>Описание с <a href="#">ссылкой</a></p>
`;

new Tooltipster(el, {
  content: htmlContent,
  interactive: true
});

Интерактивность позволяет работать с элементами внутри подсказки: кликать по ссылкам, нажимать кнопки и т.д.

Позиционирование подсказок

Tooltipster автоматически выбирает оптимальное положение подсказки, но можно задавать вручную через параметр side:

new Tooltipster(el, {
  content: 'Подсказка справа',
  side: 'right'
});

Возможные значения:

  • top
  • bottom
  • left
  • right
  • top-left, top-right, bottom-left, bottom-right и другие комбинированные варианты.

Параметр distance задает отступ подсказки от элемента, а maxWidth ограничивает ширину для длинных сообщений.

Асинхронное содержимое

Для динамического контента можно использовать функцию, возвращающую промис:

new Tooltipster(el, {
  content: 'Загрузка...',
  functionBefore: (instance, helper) => {
    return fetch('/tooltip-data')
      .then(response => response.text())
      .then(data => {
        instance.content(data);
      });
  }
});

Метод functionBefore выполняется перед показом подсказки и позволяет подгружать данные с сервера или генерировать контент динамически.

Группы подсказок и глобальные настройки

Tooltipster позволяет создавать группы подсказок для синхронного управления:

const tooltips = Array.from(document.querySelectorAll('.group-tooltip'))
  .map(el => new Tooltipster(el, { content: 'Групповая подсказка' }));

// Скрыть все подсказки группы
tooltips.forEach(t => t.hide());

Для общих настроек можно использовать глобальные параметры через Tooltipster.setDefaults:

Tooltipster.setDefaults({
  animation: 'fade',
  delay: 300,
  theme: 'tooltipster-light'
});

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

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

Tooltipster корректно работает на тач-устройствах. Для улучшения взаимодействия можно включить touchDevices и interactive:

new Tooltipster(el, {
  content: 'Подсказка для мобильного',
  interactive: true,
  touchDevices: true
});

Это гарантирует, что подсказка появится при касании элемента и останется видимой для взаимодействия.

Дополнительные возможности

  • Themes — легко кастомизируемые темы через CSS.
  • Triggers — гибкая настройка событий.
  • Animation — плавное появление и исчезновение.
  • Callbacks — функции onShow, onHide, onReady для тонкой настройки поведения.
  • Positioning — автоматическое и ручное позиционирование подсказок.
  • Dynamic content — возможность обновлять и подгружать содержимое на лету.

Tooltipster в Vanilla JS предоставляет полный контроль над поведением подсказок без зависимостей от jQuery, сохраняя гибкость и масштабируемость при работе с современными фронтенд-проектами.

Оглавление