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-box[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-box[data-inertia][data-state='visible'] {
  transition-timing-function: cubic-bezier(...);
}

#Material filling effect

Seen here.

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 box = instance.popper.firstElementChild;
    requestAnimationFrame(() => {
      box.classList.add('animated');
      box.classList.add('wobble');
    });
  },
  onHidden(instance) {
    const box = instance.popper.firstElementChild;
    box.classList.remove('animated');
    box.classList.remove('wobble');
  },
});

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