Кастомные анимации

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

Настройка пользовательской анимации через CSS

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

.tooltipster-custom-enter {
  transform: translateY(-10px);
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

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

.tooltipster-custom-leave {
  transform: translateY(0);
  opacity: 1;
  transition: all 0.3s ease-in-out;
}

.tooltipster-custom-leave.tooltipster-show {
  transform: translateY(-10px);
  opacity: 0;
}

В конфигурации Tooltipster указывается:

$('.tooltip').tooltipster({
  animation: 'custom',
  animationDuration: 300,
  functionInit: function(instance, helper){
    instance.content('Кастомный тултип с анимацией');
  }
});

animation: 'custom' – указывает на использование CSS-анимации через классы tooltipster-custom-enter и tooltipster-custom-leave.
animationDuration синхронизируется с длительностью CSS-переходов.

Программное управление анимацией через `functionBefore` и `functionAfter`

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

$('.tooltip').tooltipster({
  functionBefore: function(instance, helper){
    const tooltip = helper.tooltip;
    tooltip.css({opacity: 0, transform: 'scale(0.8)'});
    setTimeout(() => {
      tooltip.css({transition: 'all 0.4s ease', opacity: 1, transform: 'scale(1)'});
    }, 0);
  },
  functionAfter: function(instance, helper){
    const tooltip = helper.tooltip;
    tooltip.css({transition: 'all 0.4s ease', opacity: 0, transform: 'scale(0.8)'});
  }
});

functionBefore вызывается перед отображением тултипа, позволяет задать начальное состояние анимации.
functionAfter вызывается после скрытия, позволяет плавно скрыть элемент.
Применение setTimeout гарантирует, что браузер применит начальные CSS-свойства до начала анимации.

Пример сложной анимации с задержкой и последовательными эффектами

Можно комбинировать движение, прозрачность и масштабирование с разными скоростями и задержками:

$('.tooltip').tooltipster({
  functionBefore: function(instance, helper){
    const tooltip = helper.tooltip;
    tooltip.css({
      opacity: 0,
      transform: 'translateY(-20px) scale(0.9)'
    });
    setTimeout(() => {
      tooltip.css({
        transition: 'all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55)',
        opacity: 1,
        transform: 'translateY(0) scale(1)'
      });
    }, 50);
  },
  functionAfter: function(instance, helper){
    const tooltip = helper.tooltip;
    tooltip.css({
      transition: 'all 0.4s ease-in-out',
      opacity: 0,
      transform: 'translateY(-20px) scale(0.9)'
    });
  }
});

Особенности:

Использование cubic-bezier позволяет создать эффект “подпрыгивания”.
Начальная задержка в setTimeout нужна для корректного применения CSS-транзишена.
Раздельное управление входом и выходом даёт полный контроль над визуальной динамикой.

Анимация с использованием сторонних библиотек

Tooltipster не конфликтует с библиотеками анимации, такими как GSAP или Anime.js. Можно управлять тултипом через API:

$('.tooltip').tooltipster({
  functionReady: function(instance, helper){
    gsap.fromTo(helper.tooltip, 
      {opacity: 0, y: -20}, 
      {opacity: 1, y: 0, duration: 0.5, ease: 'back.out(1.7)'}
    );
  },
  functionClose: function(instance, helper){
    gsap.to(helper.tooltip, {opacity: 0, y: -20, duration: 0.3, ease: 'power1.in'});
  }
});

functionReady вызывается после полной инициализации тултипа.
functionClose контролирует анимацию скрытия.
Использование внешней библиотеки даёт гибкость, невозможную с чистым CSS, например сложные кривые движения или последовательные эффекты.

Настройка анимаций для разных триггеров

Tooltipster позволяет отдельно настраивать анимации для разных событий (hover, click, focus):

$('.tooltip').tooltipster({
  trigger: 'click',
  functionBefore: function(instance, helper){
    helper.tooltip.addClass('tooltip-click-animate');
  },
  functionAfter: function(instance, helper){
    helper.tooltip.removeClass('tooltip-click-animate');
  }
});

Применение классов позволяет создавать разные анимации в зависимости от триггера.
Можно одновременно использовать CSS-переходы и JS-анимацию.