Препроцессоры CSS

Tippy.js — это легковесная и мощная библиотека для создания всплывающих подсказок (tooltips) в JavaScript. Она построена поверх Popper.js, что обеспечивает точное позиционирование элементов относительно целевых объектов. Основной принцип работы Tippy.js заключается в привязке подсказки к DOM-элементу с помощью селектора или ссылки на сам элемент, после чего можно настраивать её поведение, анимацию и стиль.

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

В этом примере подсказка прикрепляется к элементу с id myButton и отображается сверху.

Инициализация и привязка подсказок

Существует несколько способов привязки подсказок:

  1. По селектору CSS Используется наиболее часто при работе с множеством элементов.

    tippy('.tooltip', {
  content: 'Подсказка для всех элементов с классом tooltip',
  animation: 'fade',
});

  2. Через ссылку на DOM-элемент Позволяет гибко управлять конкретным элементом.

    const btn = document.querySelector('#button1');
tippy(btn, {
  content: 'Индивидуальная подсказка',
});

  3. Динамическая генерация контента Поддерживается функция, возвращающая HTML или текст.

    tippy('#dynamic', {
  content: () => `Сегодня: ${new Date().toLocaleDateString()}`,
});

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

Tippy.js предоставляет обширный набор опций для тонкой настройки:

  • placement — определяет позицию подсказки относительно целевого элемента (top, bottom, left, right, а также их вариации с -start и -end).
  • trigger — событие, вызывающее показ подсказки (mouseenter, click, focus, manual).
  • animation — тип анимации появления (fade, scale, shift-away, perspective, shift-toward).
  • arrow — отображение стрелки подсказки (true или false).
  • interactive — делает подсказку интерактивной, позволяя пользователю кликать внутри неё.
  • delay — задержка появления и скрытия подсказки (может быть массивом [появление, скрытие]).
  • theme — применение пользовательских стилей через CSS-классы.
tippy('#example', {
  content: 'Интерактивная подсказка',
  interactive: true,
  delay: [100, 200],
  arrow: true,
  theme: 'custom-theme',
});

Использование HTML-контента

Tippy.js поддерживает HTML-контент, что позволяет создавать сложные подсказки с форматированием, изображениями и кнопками:

tippy('#htmlExample', {
  content: `<strong>Важное сообщение:</strong> <br> Не забудьте проверить обновления!`,
  allowHTML: true,
});

Важно включать allowHTML: true, иначе HTML-код будет отображаться как обычный текст.

Управление состоянием подсказок

Каждая подсказка возвращает объект с методами для управления:

  • show() — отобразить подсказку
  • hide() — скрыть подсказку
  • setContent(newContent) — изменить содержимое
  • destroy() — удалить подсказку и очистить события
const tip = tippy('#controlled', { content: 'Контролируемая подсказка' });
tip.show();
tip.setContent('Обновленное содержание');
tip.hide();
tip.destroy();

Темизация и стилизация

Tippy.js использует систему классов для темизации. По умолчанию есть темы light, dark и translucent, но можно создавать кастомные стили:

.tippy-box[data-theme~='custom-theme'] {
  background-color: #2b2b2b;
  color: #fff;
  font-size: 14px;
  border-radius: 6px;
  padding: 8px 12px;
}
.tippy-box[data-theme~='custom-theme'][data-placement^='top'] > .tippy-arrow {
  border-top-color: #2b2b2b;
}

В конфигурации необходимо указать тему:

tippy('#custom', {
  content: 'Кастомная подсказка',
  theme: 'custom-theme',
});

Группировка и делегирование

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

tippy.delegate(document.body, {
  target: '.has-tooltip',
  content(reference) {
    return reference.getAttribute('data-tooltip');
  },
});

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

Адаптивность и поведение при переполнении

Tippy.js поддерживает автоматическое позиционирование и подстраивание под границы окна. Настройки Popper.js можно передать через опцию popperOptions:

tippy('#adaptive', {
  content: 'Подсказка с адаптивным позиционированием',
  placement: 'right',
  popperOptions: {
    modifiers: [
      {
        name: 'flip',
        options: {
          fallbackPlacements: ['left', 'top', 'bottom'],
        },
      },
    ],
  },
});

Работа с анимацией и временными эффектами

Можно комбинировать animation с CSS-переходами и настройкой duration для плавного появления и исчезновения:

tippy('#animated', {
  content: 'Анимированная подсказка',
  animation: 'scale',
  duration: [300, 500],
});

Здесь первый параметр duration отвечает за появление, второй — за скрытие.

Интеграция с другими библиотеками

Tippy.js легко интегрируется с фреймворками, такими как React, Vue и Angular, благодаря наличию официальных обёрток. Для Vanilla JS достаточно подключить скрипт и стили, после чего использовать API, описанный выше.

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

Оглавление