Utilizing default animations with headless tippy

Does headless tippy support the default animations?

I’ve tried utilizing the default animations with headless tippy to no avail.

I noticed that in the examples for headless animation [1][2] that animation takes a boolean prop instead of the animation name (e.g. shift-towards-subtle).

This is a contrived example to illustrate what I’m trying to do:

 <Tippy
        render={attrs => (
          <div className="tippy-box" data-animation="shift-towards-subtle" {...attrs}>
            <div className="tippy-content">
              {this.props.content}
            </div>
            <div data-popper-arrow="" className="tippy-arrow" />
          </div>
        )}
      >
        <span>I'm a tooltip!</span>
      </Tippy>

I’ve tried setting data-animation AND animation attributes on:

• Tippy
• inside of render
• and on .tippy-content element

Thanks!

[atomiks]

Working version: https://codesandbox.io/s/sharp-wave-gj92x?file=/src/App.js

Looks like transitionDuration: this.state.isVisible ? '400ms' : '0' is the important part.

[ryanjmack]

Beautiful! It worked!

The reason we’re going headless is because we need granular control over the class names that are applied to the elements that compose the tooltip.

We use CSS modules and rename our classes in our prod build pipeline. When we used the previous version of tippy-react, we had to modify our build tasks and use global css selectors for tippy-* classes. It sufficed, but with headless we can get rid of those workarounds and remove a dependency in our build pipeline!