Tippy.js

Animations

Tippies use an opacity fade transition by default.

#Included animations

The package comes with extra animations for you to use:

• shift-away
• shift-toward
• scale
• perspective

They need to be imported separately.

import 'tippy.js/animations/scale.css';

Pass the animation name as the animation prop:

tippy('button', {
  animation: 'scale',
});

Each of these animations also has 3 variants (normal, subtle, and extreme) using the following format:

import 'tippy.js/animations/scale.css';
import 'tippy.js/animations/scale-subtle.css';
import 'tippy.js/animations/scale-extreme.css';

#Custom animations

To create your own animation:

• Specify the animation name in the [data-animation] attribute selector
• Target the visibility state of the tippy: [data-state="hidden"] or [data-state="visible"]
• Depending on the animation, target the placement of the tippy too: e.g. [data-placement^="top"]

.tippy-tooltip[data-animation='rotate'][data-state='hidden'] {
  opacity: 0;
  transform: rotate(90deg);
}

tippy('button', {
  animation: 'rotate',
});

#Inertia

There's a prop named inertia that adds an elastic inertial effect to the tippy, which is a limited CSS-only way to mimic spring physics.

tippy('button', {
  inertia: true,
});

You can customize this prop in your CSS:

.tippy-tooltip[data-inertia][data-state='visible'] {
  transition-timing-function: cubic-bezier(...);
}

#Material filling effect

Import the animateFill plugin, plus dist/backdrop.css & animations/shift-away.css stylesheets.

import tippy, {animateFill} from 'tippy.js';
import 'tippy.js/dist/backdrop.css';
import 'tippy.js/animations/shift-away.css';

tippy(targets, {
  animateFill: true,
  plugins: [animateFill],
});

#CSS animations

Maybe plain transitions aren't enough for your use case. You can also use CSS animations (e.g. animate.css):

tippy('button', {
  onMount(instance) {
    const {tooltip} = instance.popperChildren;
    requestAnimationFrame(() => {
      tooltip.classList.add('animated');
      tooltip.classList.add('wobble');
    });
  },
  onHidden(instance) {
    const {tooltip} = instance.popperChildren;
    tooltip.classList.remove('animated');
    tooltip.classList.remove('wobble');
  },
});

You can also use @keyframes and add the animation property to your animation selector too.

#Dimensions transition

While a tippy is showing, the content inside of it may change. How do you smoothly transition its dimensions? By default, it instantly changes size when the content is updated. It turns out this is quite complex to do, but possible.

#Partially dynamic

View the CodePen demo.