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

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

$('.tooltip').tooltipster({
    animation: 'fade', // стандартная анимация
    animationDuration: 300 // длительность в миллисекундах
});

animationDuration задаёт продолжительность анимации появления и исчезновения, что позволяет синхронизировать подсказку с другими элементами интерфейса.

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

Для интеграции собственных CSS-анимаций необходимо установить animation: 'custom' и определить классы анимации через опции functionInit и functionBefore.

$('.tooltip').tooltipster({
    animation: 'custom',
    functionInit: function(instance, helper){
        instance.content().addClass('my-tooltip-animation');
    },
    functionBefore: function(instance, helper){
        instance.content().addClass('show');
    },
    functionAfter: function(instance, helper){
        instance.content().removeClass('show');
    }
});

В данном случае класс my-tooltip-animation содержит базовые стили подсказки, а класс show запускает CSS-анимацию появления.

.my-tooltip-animation {
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease;
}

.my-tooltip-animation.show {
    opacity: 1;
    transform: translateY(0);
}

Такой подход позволяет использовать любые CSS-свойства — от изменения цвета до сложных трансформаций и фильтров.

Последовательность анимаций и синхронизация

Tooltipster поддерживает хуки functionBefore и functionAfter, которые можно применять для синхронизации нескольких анимаций. Например, при наведении на элемент можно одновременно анимировать подсказку и смещение основного блока:

$('.tooltip').tooltipster({
    animation: 'custom',
    functionBefore: function(instance, helper){
        $('#main-block').addClass('shift');
        instance.content().addClass('show');
    },
    functionAfter: function(instance, helper){
        $('#main-block').removeClass('shift');
        instance.content().removeClass('show');
    }
});
#main-block.shift {
    transform: translateX(20px);
    transition: transform 0.4s ease;
}

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

Работа с задержкой и продолжительностью

Для плавных анимаций часто используется опция delay, которая задаёт время перед показом или скрытием подсказки.

$('.tooltip').tooltipster({
    delay: 200, // задержка перед появлением
    animationDuration: 500 // длительность анимации
});

Комбинация задержки и длительности позволяет создавать плавные эффекты «подъёма» подсказки и её исчезновения, особенно в динамических интерфейсах.

Анимации для разных положений подсказки

Tooltipster автоматически адаптирует подсказку под позицию элемента (top, bottom, left, right). Для каждой позиции можно создавать уникальные CSS-анимации:

.tooltip-top.show {
    transform: translateY(-10px);
}

.tooltip-bottom.show {
    transform: translateY(10px);
}

.tooltip-left.show {
    transform: translateX(-10px);
}

.tooltip-right.show {
    transform: translateX(10px);
}

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

Интеграция с библиотеками анимации

Tooltipster легко комбинируется с внешними CSS-анимациями, например, с Animate.css. Для этого достаточно добавлять соответствующие классы при functionBefore и убирать их при functionAfter:

$('.tooltip').tooltipster({
    animation: 'custom',
    functionBefore: function(instance, helper){
        instance.content().addClass('animate__animated animate__bounceIn');
    },
    functionAfter: function(instance, helper){
        instance.content().removeClass('animate__animated animate__bounceIn');
    }
});

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

Контроль состояния анимации

Для сложных интерфейсов важно контролировать состояние анимации. Tooltipster предоставляет метод status() и события open/close, что позволяет отслеживать текущую фазу и корректно синхронизировать внешние анимации:

$('.tooltip').on('tooltipster-open', function(event){
    $(this).addClass('active-tooltip');
});

$('.tooltip').on('tooltipster-close', function(event){
    $(this).removeClass('active-tooltip');
});

Такой подход обеспечивает согласованное поведение подсказки при динамическом изменении интерфейса и предотвращает «мерцание» анимации.

Заключение по интеграции

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

Оглавление