Анимация появления

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

Предустановленные эффекты

Tooltipster имеет стандартный набор анимаций, которые можно указать через опцию animation при инициализации:

$('.tooltip').tooltipster({
    animation: 'fade', // fade, grow, swing, slide, fall
    delay: 200,
    theme: 'tooltipster-default'
});
  • fade – плавное появление и исчезновение через прозрачность.
  • grow – подсказка увеличивается из точки прикрепления к элементу.
  • swing – плавное раскачивание при появлении.
  • slide – скользящее появление с края.
  • fall – «падение» подсказки сверху вниз.

Каждое значение анимации можно комбинировать с другими параметрами, такими как delay, speed, interactive.

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

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

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

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

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

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

$('.tooltip').tooltipster({
    animation: 'customAnimation',
    delay: 200
});
.tooltipster-box {
    transform-origin: top center;
    opacity: 0;
    transition: all 0.4s ease-in-out;
}

.tooltipster-box.tooltipster-show {
    opacity: 1;
    transform: scale(1);
}
  • tooltipster-box – базовый класс подсказки.
  • tooltipster-show – класс, который добавляется при показе подсказки.
  • transform-origin и transform позволяют задавать эффект увеличения или вращения.
  • transition управляет плавностью изменений.

Анимация при интерактивных подсказках

Если подсказка содержит интерактивные элементы (кнопки, ссылки), используется опция interactive:

$('.tooltip').tooltipster({
    animation: 'grow',
    interactive: true,
    delay: 100
});

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

Комбинирование анимаций и позиции

Анимация появления тесно связана с позицией подсказки (side). Некоторые эффекты, например slide или fall, могут выглядеть по-разному в зависимости от того, где расположена подсказка:

$('.tooltip').tooltipster({
    animation: 'slide',
    side: 'right',
    speed: 300
});
  • При side: 'top' подсказка скользит сверху вниз.
  • При side: 'bottom' – снизу вверх.
  • При side: 'left' и side: 'right' – движение слева направо и наоборот.

Это позволяет создавать логически согласованные визуальные эффекты, улучшая пользовательский опыт.

Анимация при открытии и закрытии

Tooltipster автоматически добавляет классы для анимации:

  • tooltipster-show – при открытии.
  • tooltipster-hide – при закрытии.

Можно использовать их для создания разных эффектов входа и выхода:

.tooltipster-box.tooltipster-show {
    opacity: 1;
    transform: scale(1);
    transition: all 0.4s ease-out;
}

.tooltipster-box.tooltipster-hide {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.4s ease-in;
}

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

Анимация при динамическом контенте

Если содержимое подсказки меняется после её открытия, используется метод content:

$('.tooltip').tooltipster({
    content: $('<span>Загрузка...</span>'),
    animation: 'fade'
});

// обновление содержимого
$('.tooltip').tooltipster('content', $('<span>Готово!</span>'));

Анимация при обновлении будет соответствовать выбранной, а плавный переход можно контролировать с помощью CSS transition.

Tooltipster сочетает простоту настройки с гибкостью кастомизации анимации. Управление предустановленными эффектами, создание собственных CSS-анимаций и сочетание их с интерактивными элементами позволяет реализовать подсказки любой степени сложности и визуальной выразительности.

Оглавление