Tippyjs: Upgrade to Popper 2

[atomiks]

@FezVrasta and I have been working hard on releasing the next Popper version (v2) since November (the rewrite initially started by him in 2018 though but laid dormant for ages due to difficulties). The rewrite of Popper will be explained more in-depth in an article once the final release is out, but it fixes tons of bugs and API flaws that have come to light over the past 3 years (Popper v1 was released in early 2017 and has been in use since Tippy v0!)

It's a breaking major, so Tippy will need to increment its own major (v6). I'd like to make some other changes to Tippy as well to better integrate with libraries like react-spring - effectively stripping the built-in CSS animations out and element creation and making them optional, but of course still easy to use and add in.

[powah]

Just interested why Tippy would need to increment its major? Does it mean that its API will change and have breaking changes?

[atomiks]

Tippy exposes Popper APIs in popperOptions and instance.popperInstance, which have changed, so they'll break when we upgrade.

[atomiks]

Here's the article: https://dev.to/fezvrasta/smarter-tooltips-and-popovers-with-popper-2-44bh

[atomiks]

Update

Most of the work is now complete. I'm hoping to release the final by the end of February, but I'll release an alpha within the next couple days.

Positioning

Popper 2 works much better than v1, so in general you'll find far less positioning issues! There are lots of bug reports for broken positioning due to Popper 1, and I'm pretty sure Popper 2 has fixed almost all of them 🤞

Size

Popper 1 was a pretty large dependency, but it's now 1.7 kB smaller for its full version. I've also been able to delete nearly 1 kB worth of legacy hacks that existed due to v1 bugs/problems.

Minzip sizes, JS + tippy.css file (brotli compression is likely 10-20% smaller):

| Version | Full size (F) | Tree-shaken size (TS) | Self (F) | Self (TS)
|---|---|---|---|---|
| v5 | 15.7 kB | 12.8 kB | 8.2 kB | 5.5 kB |
| v6 | 12.7 kB | 10.3 kB | 6.8 kB | 4.4 kB |

There's also the matter of using Popper Lite instead of the full version, which is tiny, but I'm not sure how to incorporate it yet. I'll continue to try to minimize the bundle size nonetheless.

Headless Tippy

You'll be able to render your own tippy element in the next version (the default import will still be the vanilla element creation):

tippy(targets, {
  content: 'hello',
  render({props}) {
    const popper = document.createElement('div');
    popper.textContent = props.content;

    return { 
      popper,
      update(prevProps, nextProps) {
        // DOM diffing (e.g. changing content)
        popper.textContent = nextProps.content;
      }
    };
  }
});

This is mainly useful for React and CSS in JS for advanced scenarios to avoid globals. For Tippy React it will likely be a template prop that you pass static JSX to instead of a render function prop.

Spring animations

You can now integrate these properly with the added instance.unmount() method and being able to set animation: false.

Breaking changes

Import paths may change, I'm not sure of the new structure though. These changes aren't final either

Changes due to Popper 2

• 🔴popperOptions & instance.popperInstance have changed with Popper 2 upgrade
• 🔴The following popper-related props have been removed or changed: distance, offset, flip, flipBehavior, flipOnUpdate, boundary (I'm delegating all non-essentials to popperOptions)
• 🔴Arrow CSS has changed due to Popper 2, so if you were changing the size it will likely need to be modified
• 🔴.tippy-popper is gone as a selector class since there's no styling involved on it (no attribute etc)
• 🔴IE11 is not supported by default as it now requires 3 polyfills. It takes almost no effort to support it using a single link tag, or if you're already polyfilling these in your apps (Promise, Object.assign, Array.prototype.find)

Self changes

• 🔴allowHTML is false by default for default security protection
• 🔴multiple prop has been removed due to typing issues
• 🔴updateDuration is now moveTransition
• 🔴.tippy-tooltip is now .tippy-box (more generic, since popovers / anything else is possible with Tippy)
• 🔴.tippy-tooltip.mytheme-theme for theming changed, now do .tippy-box[data-theme~="mytheme"] (I didn't even know it was possible to target a single theme inside a space-separated list 🤦‍♂)

[atomiks]

I published the first alpha tippy.js@next — feedback is appreciated. The breaking changes I listed above should be enough to allow you to experiment with it, not many of the core features have changed.

Also a couple experimental features I didn't mention have been added (may change):

• createSingleton has an overrides prop that allows you to specify the props that the individual tippy instances can override, e.g. placement, see https://github.com/atomiks/tippy.js-react/issues/153
• getReferenceClientRect is a new prop that allows you to integrate Popper's virtual element positioning easily. Return a DOMRect / ClientRect to position the tippy relative to any coordinates https://popper.js.org/docs/v2/virtual-elements/

[gregkonush]

@atomiks so if I want to use this alpha version with tippy.js-react what should I do?

[atomiks]

@djkalmyk I'll probably release 6.0.0 this weekend anyway 😃

Some docs improvements I worked on:

• There's a migration guide for 5.x to 6.x available, which is the same as 4.x to 5.x but much shorter.
• The docs are now versioned finally, so you can still access 5.x docs on the website without needing to navigate through the .mdx files manually on the repo like v4.
• All Props got a complete overhaul/redesign and should be easier to read and understand, since each prop now has its own dedicated section rather than being limited to the table format.