CSS transitions

Tippy.js использует CSS transitions для плавного появления и исчезновения всплывающих подсказок. transition управляет изменением свойств CSS элемента во времени, позволяя добиться эффектов затухания, сдвига и масштабирования.

В Tippy.js ключевыми параметрами являются:

  • animation – тип анимации (например, fade, scale, shift-away).
  • duration – длительность анимации в миллисекундах. Может быть числом или массивом [show, hide].
  • easing – функция временной кривой для анимации (например, ease, ease-in-out).
tippy('#button', {
  content: 'Пример подсказки',
  animation: 'scale',
  duration: [200, 400],
  easing: 'ease-in-out',
});

В этом примере появление подсказки займет 200 мс, а исчезновение – 400 мс.

Кастомизация через CSS

Tippy.js позволяет полностью контролировать анимацию через собственные CSS-классы. По умолчанию библиотека подключает стили tippy.css, содержащие определения для стандартных анимаций:

.tippy-box[data-animation~='scale'] {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s;
}

.tippy-box[data-animation~='fade'] {
  transition: opacity 0.15s ease-in-out;
}

Можно переопределить эти стили или добавить новые анимации:

.tippy-box[data-animation~='slide-up'] {
  transform: translateY(10px);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.tippy-box[data-show][data-animation~='slide-up'] {
  transform: translateY(0);
  opacity: 1;
}
  • data-show используется Tippy.js для обозначения активного состояния подсказки.
  • Параметр transform позволяет задавать смещения, масштабирование и вращение.
  • opacity управляет прозрачностью для эффекта плавного появления.

Анимации на основе ключевых кадров

Помимо простых transitions, можно применять CSS keyframes для сложных анимаций:

@keyframes bounce-in {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.tippy-box[data-animation~='bounce'] {
  animation: bounce-in 0.3s forwards;
}
  • forwards сохраняет конечное состояние после завершения анимации.
  • Такой подход полезен для эффекта подпрыгивания или “встряхивания” подсказки.

Управление временем анимации через JavaScript

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

tippy('#link', {
  content: 'Текст подсказки',
  animation: 'fade',
  duration: [300, 500],
  onShow(instance) {
    console.log('Подсказка появляется');
  },
  onHide(instance) {
    console.log('Подсказка исчезает');
  }
});
  • duration может быть массивом [show, hide] для разных скоростей появления и скрытия.
  • onShow и onHide позволяют запускать дополнительные эффекты в момент начала или окончания transition.

Комбинирование transition с offset и transform

Для более выразительных эффектов часто комбинируют transition с параметрами:

  • offset – смещение подсказки относительно целевого элемента.
  • popperOptions – контроль позиции через Popper.js, на котором основан Tippy.js.
tippy('#icon', {
  content: 'Информация',
  animation: 'shift-away',
  offset: [0, 10],
  duration: 300,
});
  • При использовании shift-away подсказка плавно смещается и исчезает, создавая эффект “отталкивания”.
  • Параметр offset корректирует положение в пикселях.

Советы по оптимизации анимаций

  1. Использовать will-change для повышения производительности:
.tippy-box {
  will-change: transform, opacity;
}
  1. Выбирать только необходимые свойства для transition: чем меньше CSS-свойств участвует, тем плавнее анимация.
  2. Длительность анимации 150–300 мс оптимальна для UX, более длинные переходы создают ощущение “торможения”.
  3. Совмещать scale + opacity вместо сложных комбинаций transform, чтобы снизить нагрузку на GPU.

Особенности взаимодействия с интерактивными подсказками

Для подсказок с интерактивным содержимым (interactive: true) важно корректно настраивать duration и animation, иначе могут возникать резкие исчезновения при уходе курсора:

tippy('#menu', {
  content: '',
  allowHTML: true,
  interactive: true,
  animation: 'scale',
  duration: [150, 250],
});
  • Плавное скрытие подсказки предотвращает случайное закрытие при наведении на дочерние элементы.
Оглавление