Уведомления и алерты

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

Создание простого уведомления

Для базового всплывающего уведомления используется вызов функции tippy() с элементом и текстом подсказки:

tippy('#notificationButton', {
  content: 'Новое уведомление!',
  placement: 'top', // позиционирование над элементом
  animation: 'scale', // плавное появление
  duration: [200, 200], // время появления и скрытия
});

Ключевые моменты:

  • content — текст или HTML-содержимое уведомления.
  • placement — определяет позицию относительно целевого элемента (top, bottom, left, right).
  • animation — эффект появления и скрытия, можно использовать: 'fade', 'scale', 'shift-away', 'shift-toward'.
  • duration — массив из двух чисел [show, hide], указывающий продолжительность анимации.

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

Tippy.js позволяет добавлять интерактивные элементы, такие как кнопки подтверждения или закрытия уведомления. Для этого применяется опция allowHTML: true:

tippy('#alertButton', {
  content: `<div>
              <strong>Ошибка!</strong>
              <button id="closeAlert">Закрыть</button>
            </div>`,
  allowHTML: true,
  interactive: true,
  trigger: 'click',
  placement: 'right',
});

Особенности:

  • interactive: true — позволяет взаимодействовать с содержимым подсказки, например нажимать кнопки.
  • trigger: 'click' — уведомление показывается при клике, вместо стандартного mouseenter.
  • События кнопок внутри уведомления можно привязать через стандартные DOM-обработчики:
document.addEventListener('click', (e) => {
  if (e.target.id === 'closeAlert') {
    e.target.closest('.tippy-box')._tippy.hide();
  }
});

Управление временем отображения уведомлений

Для автоматического скрытия уведомлений используется опция duration совместно с методами управления тултипом:

const tip = tippy('#autoHideButton', {
  content: 'Сообщение исчезнет через 3 секунды',
  trigger: 'manual',
  placement: 'bottom',
  hideOnClick: false,
});

tip.show();

setTimeout(() => {
  tip.hide();
}, 3000);

Важно:

  • trigger: 'manual' позволяет управлять показом и скрытием уведомления через методы .show() и .hide().
  • hideOnClick: false предотвращает закрытие при клике на сам элемент, что удобно для временных сообщений.

Кастомизация внешнего вида

Стилизация уведомлений осуществляется через опцию theme или через пользовательские классы CSS:

tippy('#customStyleButton', {
  content: 'Пользовательский стиль',
  theme: 'custom',
  animation: 'fade',
  arrow: true,
});

И соответствующая CSS-настройка:

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

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

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

document.querySelectorAll('.notify').forEach((el) => {
  tippy(el, {
    content: el.dataset.message,
    placement: 'top',
    animation: 'scale',
    duration: [150, 150],
  });
});

Такой подход удобен для массовых уведомлений на страницах с таблицами или списками элементов.

Встроенные события

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

tippy('#eventButton', {
  content: 'Наблюдение за событиями',
  onShow(instance) {
    console.log('Уведомление показано');
  },
  onHide(instance) {
    console.log('Уведомление скрыто');
  },
  onClickOutside(instance, event) {
    console.log('Клик вне уведомления', event.target);
  }
});

События для уведомлений:

  • onShow — вызывается при появлении.
  • onShown — после завершения анимации появления.
  • onHide — при начале скрытия.
  • onHidden — после полного скрытия.
  • onClickOutside — при клике вне тултипа.

Настройка позиционирования

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

tippy('#positionButton', {
  content: 'Я адаптируюсь к окну!',
  placement: 'auto',
  flip: true,  // разрешает смену позиции, если элемент выходит за границы окна
  offset: [0, 10], // смещение относительно цели
});

Особенности:

  • placement: 'auto' автоматически выбирает подходящее направление.
  • flip: true предотвращает перекрытие окна браузера.
  • offset: [x, y] позволяет точно позиционировать уведомление.

Анимация и переходы

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

tippy('#animatedButton', {
  content: 'С кастомной анимацией',
  animation: 'shift-away',
  duration: [300, 300],
});

Дополнительно: можно создавать свои анимации через CSS, используя селекторы .tippy-box[data-animation='my-animation'] и задавая ключевые кадры @keyframes.

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

Оглавление