Модальные окна на базе Tippy

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

Для создания модального окна Tippy используется функция tippy(), которой передается целевой элемент и объект конфигурации. Например:

tippy('#button', {
  content: 'Это модальное окно',
  interactive: true,
  trigger: 'click',
  placement: 'bottom',
  hideOnClick: false
});

Ключевые параметры:

  • content — содержимое всплывающего окна, может быть строкой или DOM-элементом.
  • interactive: true — позволяет взаимодействовать с контентом (клик, ввод текста).
  • trigger: 'click' — определяет событие, которое вызывает появление окна.
  • placement — позиционирование относительно целевого элемента (top, bottom, left, right).
  • hideOnClick: false — предотвращает автоматическое скрытие окна при клике внутри него.

Создание кастомного контента

Вместо обычного текста content может быть полноценным HTML-контентом. Это позволяет создавать сложные модальные окна с формами, кнопками и изображениями:

const modalContent = document.createElement('div');
modalContent.innerHTML = `
  <h3>Форма обратной связи</h3>
  <input type="text" placeholder="Ваше имя">
  <button id="submitBtn">Отправить</button>
`;

tippy('#contactButton', {
  content: modalContent,
  interactive: true,
  trigger: 'click',
  placement: 'right',
  theme: 'light-border',
});

Использование DOM-элемента в content дает возможность управлять событиями внутри модального окна и интегрировать динамический контент без необходимости создавать отдельные всплывающие слои вручную.

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

Tippy.js предоставляет методы для программного управления видимостью всплывающих окон:

  • show() — открыть окно.
  • hide() — закрыть окно.
  • toggle() — переключение состояния.
  • setContent(newContent) — обновление содержимого на лету.
  • destroy() — удаление инстанса и всех связанных событий.

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

const instance = tippy('#infoButton', {
  content: 'Загрузка...',
  interactive: true,
});

document.querySelector('#loadDataBtn').addEventListener('click', () => {
  instance.setContent('Данные успешно загружены!');
});

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

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

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

tippy('#helpButton', {
  content: 'Подсказка по элементу',
  interactive: true,
  theme: 'custom-modal',
});
.tippy-box[data-theme~='custom-modal'] {
  background-color: #fff;
  color: #333;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

В CSS можно использовать data-theme для точного таргетинга и комбинировать с анимациями через transition для плавного появления и скрытия.

Анимации и плавное открытие

Tippy предоставляет встроенные эффекты через параметр animation. Среди стандартных вариантов — fade, scale, shift-away. Для модальных окон часто используют плавное масштабирование с затемнением фона:

tippy('#openModal', {
  content: 'Модальное окно с анимацией',
  interactive: true,
  trigger: 'click',
  animation: 'scale',
  duration: [300, 200], // [появление, скрытие]
});

Дополнительно можно реализовать затемнение фона через отдельный элемент overlay, который появляется синхронно с Tippy и скрывается при закрытии модального окна.

Интеграция с формами и событиями

Модальные окна Tippy идеально подходят для интерактивных элементов: форм, кнопок, галерей. Важно включать interactive: true, чтобы клики внутри окна не закрывали его автоматически.

Пример формы с отправкой:

const formModal = document.createElement('form');
formModal.innerHTML = `
  <input type="email" placeholder="Email">
  <button type="submit">Отправить</button>
`;

const formInstance = tippy('#subscribeBtn', {
  content: formModal,
  interactive: true,
  trigger: 'click',
  hideOnClick: false,
});

formModal.addEventListener('submit', e => {
  e.preventDefault();
  alert('Форма отправлена!');
  formInstance.hide();
});

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

Использование в динамических интерфейсах

Tippy.js легко интегрируется с динамическим контентом, загруженным через JavaScript. При добавлении элементов на страницу можно создавать инстансы Tippy для новых элементов через делегирование:

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

Метод delegate полезен для страниц с множеством элементов, где создание отдельных инстансов для каждого было бы неэффективным.

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

Оглавление