Создание собственных анимаций

Tippy.js предоставляет гибкий механизм кастомизации анимаций всплывающих подсказок. По умолчанию библиотека поддерживает несколько встроенных анимаций (fade, scale, shift-away, shift-toward), но для уникального дизайна часто требуется создавать собственные анимации с использованием CSS и возможностей Tippy.js.

Подключение Tippy.js и базовая конфигурация

Для начала необходимо подключить библиотеку и её CSS:

<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/dist/tippy.css" />
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>

Инициализация базового tooltip:

tippy('#myButton', {
  content: 'Пример подсказки',
});

Использование кастомной CSS-анимации

Tippy.js поддерживает параметр animation, который можно задать как имя класса CSS. Чтобы создать собственную анимацию, необходимо:

  1. Определить ключевые кадры CSS.
  2. Создать класс анимации, указывающий длительность и кривую анимации.
  3. Применить этот класс через опцию animation.

Пример создания анимации с эффектом “появление снизу с плавным увеличением масштаба”:

@keyframes custom-fade-scale {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.tippy-animation-custom {
  animation: custom-fade-scale 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

Подключение к Tippy.js:

tippy('#myButton', {
  content: 'Подсказка с кастомной анимацией',
  animation: 'custom',
  duration: [300, 300], // длительность появления и скрытия
});

Анимации скрытия

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

.tippy-box[data-animation='custom'][data-state='hidden'] {
  animation: custom-fade-scale 0.2s reverse;
}

Это позволяет подсказке плавно исчезать, используя ту же анимацию в обратном порядке.

Использование onShow и onHide для динамических анимаций

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

tippy('#myButton', {
  content: 'Динамическая анимация',
  onShow(instance) {
    instance.popper.style.animation = 'custom-fade-scale 0.4s ease-out';
  },
  onHide(instance) {
    instance.popper.style.animation = 'custom-fade-scale 0.3s reverse';
  },
});

Это позволяет менять анимацию на лету, добавлять задержку или изменять кривую движения.

Анимации с использованием библиотеки Popper.js

Tippy.js основан на Popper.js, что позволяет комбинировать анимацию с динамическим позиционированием. Например, можно сделать появление подсказки с эффектом “выдвижения в сторону курсора”:

tippy('#myButton', {
  content: 'Выдвижение по направлению к курсору',
  animation: 'custom',
  onShow(instance) {
    const placement = instance.state.placement;
    instance.popper.style.transformOrigin =
      placement.includes('top') ? 'bottom' :
      placement.includes('bottom') ? 'top' :
      placement.includes('left') ? 'right' : 'left';
  }
});

Такой подход делает анимацию адаптивной к позиционированию подсказки.

Комбинирование нескольких анимаций

Можно комбинировать встроенные анимации Tippy.js с собственными:

tippy('#myButton', {
  content: 'Комбинированная анимация',
  animation: 'scale', // встроенная
  onShow(instance) {
    instance.popper.classList.add('custom-glow');
  }
});
.custom-glow {
  box-shadow: 0 0 10px rgba(255, 165, 0, 0.6);
}

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

Настройка временных интервалов и кривых

Параметр duration может быть массивом [появление, скрытие] или числом для одинаковой длительности. Параметр easing позволяет задавать кривую анимации для плавного эффекта:

tippy('#myButton', {
  content: 'Плавное появление',
  animation: 'custom',
  duration: [400, 200],
  easing: 'cubic-bezier(0.68, -0.55, 0.27, 1.55)'
});

Использование CSS-переменных для анимаций

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

.tippy-box {
  --tippy-scale-start: 0.8;
  --tippy-scale-end: 1;
  transform: scale(var(--tippy-scale-start));
  transition: transform 0.3s ease;
}

.tippy-box[data-state='visible'] {
  transform: scale(var(--tippy-scale-end));
}

В JavaScript можно менять переменные динамически:

tippy('#myButton', {
  content: 'Анимация с CSS-переменными',
  onShow(instance) {
    instance.popper.style.setProperty('--tippy-scale-end', '1.1');
  }
});

Вывод

Сочетание CSS-анимаций, параметров duration, easing, колбэков onShow/onHide и возможностей Popper.js открывает полный контроль над поведением и визуальными эффектами подсказок в Tippy.js. Это позволяет создавать уникальные, динамичные и отзывчивые анимации, полностью адаптированные под дизайн проекта.

Оглавление