Интеграция с CSS transitions

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

Настройка CSS transitions для тултипов

Tooltipster применяет к тултипу собственные классы при его создании и отображении. Основные классы:

  • .tooltipster-base — базовый контейнер тултипа.
  • .tooltipster-content — контейнер содержимого.
  • .tooltipster-show — добавляется при появлении тултипа.
  • .tooltipster-hide — добавляется при скрытии тултипа.

С их помощью можно задать плавные переходы. Например:

.tooltipster-base {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.tooltipster-show {
    opacity: 1;
    transform: translateY(0);
}

Здесь свойство transition задаёт плавное изменение прозрачности и смещения, а класс .tooltipster-show активирует конечное состояние анимации.

Использование событий жизненного цикла

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

  • ready — тултип полностью создан и готов к отображению.
  • before — перед началом показа тултипа.
  • after — после завершения анимации показа.
  • beforeHide — перед скрытием тултипа.
  • afterHide — после скрытия тултипа.

Пример привязки событий для запуска CSS анимации:

$('.tooltip').tooltipster({
    content: 'Пример тултипа',
    functionBefore: function(instance, helper){
        $(helper.origin).addClass('pre-show');
    },
    functionAfter: function(instance, helper){
        $(helper.origin).removeClass('pre-show');
    }
});

В данном примере можно использовать класс pre-show для установки начального состояния перед применением CSS transition.

Анимация изменения содержимого

Tooltipster поддерживает динамическое обновление содержимого через метод content(). Чтобы плавно анимировать переходы при изменении текста:

  1. Добавить CSS для контейнера содержимого:
.tooltipster-content {
    transition: opacity 0.2s ease;
}
.tooltipster-content.updating {
    opacity: 0;
}
  1. Перед обновлением содержимого добавить класс updating, дождаться окончания transition и затем обновить текст:
let instance = $('.tooltip').tooltipster('instance');
let contentEl = $(instance.content());

contentEl.addClass('updating');
setTimeout(() => {
    instance.content('Новое содержимое');
    contentEl.removeClass('updating');
}, 200);

Такой подход обеспечивает плавное исчезновение старого текста и появление нового без резких скачков.

Настройка анимаций через опции Tooltipster

Tooltipster имеет встроенные анимации, которые можно отключить для использования CSS transitions:

$('.tooltip').tooltipster({
    animation: 'none', // отключение встроенной анимации
    delay: 100, // задержка перед показом
    theme: 'tooltipster-default'
});

После отключения встроенных анимаций можно полностью контролировать внешний вид тултипа через CSS.

Кроссбраузерные рекомендации

Для плавных анимаций важно учитывать:

  • Всегда указывать префиксы -webkit- для transition и transform при поддержке старых браузеров.
  • Использовать will-change: opacity, transform; для контейнера тултипа, чтобы GPU обрабатывал анимацию, снижая лаги при появлении и скрытии.
.tooltipster-base {
    will-change: opacity, transform;
}

Комплексная анимация: появление и исчезновение

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

  1. Создать CSS классы showing и hiding с различными состояниями opacity и transform.
  2. Использовать события functionBefore и functionBeforeHide для добавления классов.
  3. Использовать события functionReady и functionAfterHide для удаления классов после завершения transition.

Пример:

.tooltipster-base.showing {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.tooltipster-base.hiding {
    opacity: 0;
    transform: translateY(-15px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
$('.tooltip').tooltipster({
    animation: 'none',
    functionBefore: function(instance, helper){
        $(helper.tooltip).addClass('showing');
    },
    functionBeforeHide: function(instance, helper){
        $(helper.tooltip).removeClass('showing').addClass('hiding');
        setTimeout(() => instance.hide(), 400); // задержка для завершения CSS transition
        return false; // отменяем стандартное скрытие до завершения анимации
    },
    functionAfterHide: function(instance, helper){
        $(helper.tooltip).removeClass('hiding');
    }
});

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

Рекомендации по производительности

  • Минимизировать количество свойств в transition (opacity и transform оптимальны).
  • Избегать анимации размеров (width, height) в тултипе.
  • Для динамических обновлений содержимого использовать отдельные контейнеры с прозрачностью, чтобы не перерисовывать весь тултип.

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

Оглавление