Встроенные анимации

Tooltipster предоставляет широкий набор встроенных анимаций для отображения всплывающих подсказок. Анимации позволяют сделать появление и исчезновение тултипов плавным, управлять визуальным восприятием информации и повышать интерактивность интерфейса. Основной механизм управления анимациями реализован через параметр animation при инициализации плагина.

Настройка анимации

Для использования анимации достаточно указать её название в опции animation:

$('.tooltip').tooltipster({
    animation: 'fade', // доступные значения: 'fade', 'grow', 'swing', 'slide', 'fall', 'slide-away'
    delay: 200, // задержка перед показом тултипа
    theme: 'tooltipster-default'
});

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

  • animation – тип анимации.
  • delay – задержка перед началом анимации (в миллисекундах).
  • speed – длительность анимации (в миллисекундах).

Виды встроенных анимаций

  1. fade Плавное появление и исчезновение подсказки с постепенным изменением прозрачности. Подходит для минималистичных интерфейсов.

  2. grow Тултип «растёт» от центра, создавая эффект увеличения размера при появлении и уменьшения при скрытии.

  3. swing Анимация с лёгким покачиванием тултипа, создаёт эффект динамичного появления.

  4. slide Тултип скользит от начальной точки к позиции назначения. Направление зависит от настроек позиции (side).

  5. fall Появление подсказки сверху вниз, имитируя падение объекта на страницу.

  6. slide-away Обратное скользящее исчезновение тултипа, часто используется совместно с анимацией slide.

Настройка скорости и задержки

Опции speed и delay позволяют тонко настраивать поведение анимации:

$('.tooltip').tooltipster({
    animation: 'slide',
    speed: 400, // длительность анимации в миллисекундах
    delay: 100, // время ожидания перед показом
});
  • speed определяет длительность анимации появления и скрытия тултипа.
  • delay задаёт задержку перед тем, как тултип станет видимым после события mouseenter.

Комбинирование с событиями

Tooltipster позволяет управлять анимациями в зависимости от событий:

$('.tooltip').tooltipster({
    animation: 'grow',
    trigger: 'click', // анимация срабатывает при клике
    interactive: true
});
  • trigger – событие, инициирующее появление тултипа (hover, click, custom).
  • interactive – позволяет взаимодействовать с содержимым тултипа без его мгновенного закрытия.

Создание пользовательских анимаций

Для более сложных визуальных эффектов можно использовать CSS-анимации. Tooltipster автоматически применяет их при указании названия класса анимации в animation:

@keyframes bounceIn {
  0% { transform: scale(0.5); opacity: 0; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); }
}

.tooltipster-box.bounce {
  animation: bounceIn 0.5s forwards;
}
$('.tooltip').tooltipster({
    animation: 'bounce', // название CSS-анимации
    theme: 'tooltipster-default'
});
  • В CSS можно полностью контролировать поведение появления и исчезновения.
  • forwards сохраняет конечное состояние анимации после её завершения.

Особенности анимаций в мобильных устройствах

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

  • Использовать простые анимации (fade, slide).
  • Уменьшать длительность анимации через speed.
  • Отключать анимацию для старых устройств через проверку window.innerWidth или Modernizr.

Практические советы

  • Комбинировать анимацию с задержкой (delay) для предотвращения случайного появления тултипов.
  • Подбирать анимацию в зависимости от размера контента: для больших тултипов лучше использовать fade или grow.
  • В CSS-анимациях использовать transform и opacity вместо top/left для более плавного GPU-ускоренного рендеринга.
  • Всегда тестировать на разных браузерах, так как сложные анимации могут вести себя иначе на мобильных и десктопных устройствах.

Динамическое изменение анимации

Tooltipster позволяет менять анимацию после инициализации:

var instance = $('.tooltip').tooltipster().tooltipster('instance');

instance.option('animation', 'swing');
  • Использование метода option позволяет адаптировать интерфейс под разные ситуации без полной реинициализации плагина.
  • Можно менять анимацию для отдельных тултипов на лету, что удобно для динамически генерируемых элементов.

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

Оглавление