Help test out Tippy v5!

Hi everyone,

The next version of Tippy.js is coming in August. In order to ensure it’s as stable as possible, I need you to help test it out.

Poll

How are you using the tippy.js package? Answer here if you get time! #550

Goals

1. Improve developer experience with warnings without bloating production bundle size
2. Massively reduce core size and make the library more treeshake-able
3. Allow new feature additions to be added separately without increasing bundle size
4. Improve naming consistency and usage

Highlights

• ⬇️ 26% smaller download size (5.8 kB minzipped including core CSS)
• ⬇️ 46% smaller parse size (16.9 kB minified including core CSS)
• ⬇️ 61% smaller core CSS (0.6 kB minzipped) + smaller external animation files
• ⚙️Development and production versions for better developer experience
• ✨New animation variations
• ✨New touch: ["hold", delay] prop (for long press behavior)
• ✨New arrow: string | Element values to use your own shape
• ✨New createSingleton method, supersedes group()
• 🌸Improved animations integration and documentation, namely fully dynamic transition dimensions when tippy content updates
• 🌸Improved naming consistency

Installation

Package Managers:

# npm
npm i tippy.js@next

# Yarn
yarn add tippy.js@next

CDN:

<script src="https://unpkg.com/popper.js@1"></script>
<script src="https://unpkg.com/tippy.js@next"></script>

Changes

View all of the details in the PR in progress.

Migration Guide

View guide

The warnings will help a lot with this.

Note to CDN users, it’s recommended to migrate using the development file:

<script src="https://unpkg.com/popper.js@1"></script>
<!-- Specify development file -->
<script src="https://unpkg.com/tippy.js@5/iife/tippy.bundle.js"></script>
<!-- 
When you're finished, you can remove everything after @5 
(or when deploying for production) 
<script src="https://unpkg.com/tippy.js@5"></script>
-->

If you were specifying a custom file path import

import tippy from 'tippy.js'; // <— fine
import tippy from 'tippy.js/esm/index.min.js'; // <— breaking

Check the new folder structure and filenames. umd is now cjs (Node) or iife (browser).

If you want the material filling effect back (it’s no longer default)

Node:

import tippy from 'tippy.js';
import 'tippy.js/backdrop.css';
import 'tippy.js/animations/shift-away.css';

tippy(targets, {
  content: 'tooltip',
  animateFill: true,
  animation: 'shift-away'
});

Browser:

<link rel="stylesheet" href="https://unpkg.com/tippy.js@5/backdrop.css" />
<link
  rel="stylesheet"
  href="https://unpkg.com/tippy.js@5/animations/shift-away.css"
/>
<script src="https://unpkg.com/popper.js@1"></script>
<script src="https://unpkg.com/tippy.js@5"></script>
<script>
  tippy(targets, {
    content: 'tooltip',
    animateFill: true,
    animation: 'shift-away'
  });
</script>

If you were using arrowType: 'round'

Include the svg-arrow CSS, and use the arrow prop instead.

Node:

import 'tippy.js/svg-arrow.css';

tippy(targets, {
  arrow: 'round'
});

Browser:

<link rel="stylesheet" href="https://unpkg.com/tippy.js@5/svg-arrow.css" />

If you were using followCursor

Enhance the tippy base function with this prop by importing it from tippy.js/extra-props.

Node:

import tippyBase from 'tippy.js';
import enhance, {followCursor} from 'tippy.js/extra-props';

const tippy = enhance(tippyBase, [followCursor]);

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

Browser:

<script src="https://unpkg.com/popper.js@1"></script>
<script src="https://unpkg.com/tippy.js@5"></script>
<script src="https://unpkg.com/tippy.js@5/extra-props/iife/tippy-extra-props.min.js"></script>
<script>
  tippy('button', {followCursor: true});
</script>

If you were using tippy.group()

Use createSingleton() and import from tippy.js/addons.

Node:

- import tippy from 'tippy.js';
- tippy.group(tippy('button'), { delay: 1000 });
+ import { createSingleton } from 'tippy.js/addons';
+ createSingleton(tippy('button'), { delay: 1000 });

Browser:

<script src="https://unpkg.com/popper.js@1"></script>
<script src="https://unpkg.com/tippy.js@5"></script>
<script src="https://unpkg.com/tippy.js@5/addons/iife/tippy-addons.min.js"></script>
<script>
  tippy.createSingleton(tippy('button'), {delay: 1000});
</script>

If you were using the target option

Use delegate() and import from tippy.js/addons.

Node:

- import tippy from 'tippy.js';
- tippy('#parent', { target: '.child });
+ import { delegate } from 'tippy.js/addons';
+ delegate('#parent', { target: '.child' });

Browser:

<script src="https://unpkg.com/popper.js@1"></script>
<script src="https://unpkg.com/tippy.js@5"></script>
<script src="https://unpkg.com/tippy.js@5/addons/iife/tippy-addons.min.js"></script>
<script>
  tippy.delegate('#parent', {target: '.child'});
</script>

If you were using the showOnInit option

It’s now named showOnCreate, to match the onCreate lifecycle hook

If you were using the size option

It’s been removed, as it’s more flexible to just use a theme and specify the font-size and padding properties.

If you were using the included themes

• google is now material

If you were creating custom themes

• [x-placement] attribute is now [data-placement]
• .tippy-roundarrow is now .tippy-svg-arrow
• .tippy-tooltip no longer has padding on it, rather the .tippy-content selector does.
• .tippy-tooltip no longer has text-align: center

If you were using default animations or creating custom animations

• shift-away, shift-toward, scale and perspective need to be imported separately now.

Node:

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

Browser:

<link
  rel="stylesheet"
  href="https://unpkg.com/tippy.js@5/animations/scale.css"
/>

• Make sure your visible state has no translation (of 0px, instead of 10px like before).

If you were using virtual reference elements

Pass a placeholder element in instead of a plain object:

tippy(document.createElement('div'));

You can overwrite its getBoundingClientRect method, just like a regular object. Make sure this placeholder element does not get appended to the document though.

If you were calling instance.set() / tippy.setDefaults() / accessing tippy.defaults

- instance.set({});
+ instance.setProps({});

- tippy.defaults;
+ tippy.defaultProps;

- tippy.setDefaults({});
+ tippy.setDefaultProps({});

Types

• Props is not Partial anymore, it’s Required
• Options removed (use Partial<Props>)
• BasicPlacement renamed to BasePlacement

[rwwagner90]

@atomiks I’ll work on creating something for Ember sometime soon. I’ll let you know.

[atomiks]

For final release? Yeah. Beta in the next day or so maybe?

Doesn’t seem like too many people are going to test it out anyway so w/e lol. I’ll just do what I think is best as possible.