atomiks/tippyjs v5.0.0 on GitHub

View migration guide from v4 to v5

Goals

Improve developer experience with warnings without bloating production bundle size
Reduce core size and make the library more tree-shakable
Allow new feature additions to be added separately without increasing bundle size (addons & plugins system)
Improve naming consistency and usage

Highlights

🌳 Core size has decreased

The library is now tree-shakable, allowing you to import and use only the parts you need.

⬇️ 30%+ smaller download size
⬇️ 50%+ smaller parse size
⬇️ 60%+ smaller core CSS + smaller external animation files

👷 Better developer experience

There is now a DEV-only messaging system to help you when things go wrong.

🔥 Animation improvements

There is a new /animations folder (like /themes) and creating custom animations is a smoother experience. Additionally, there is new documentation about fully dynamic transitions of a tippy element's dimensions, and work is being done to create an official API for it.

🤩 Plenty of new features

New touch: ["hold", delay] prop (for long press behavior)
New arrow: string | SVGElement values to use your own shape
New createSingleton addon, supersedes group() for smooth transitions
New sticky behavior to check reference or popper rects (or both)
New inlinePositioning prop supports better inline element positioning (further behavior options to come)

🔌 Plugins API

Allows you to extend functionality of tippy instances and create your own props.

♿ Improved accessibility out of the box

Interactive tippies are now accessible by default, and DEV warnings will let you know if there is an accessibility problem.

🐞 Subtle behavioral bugs fixed and improvements made

animateFill: true is no longer default, so the shape cut off issue is not present with large content unless you intentionally use it
hideOnClick uses mousedown instead of click
Calling .disable() will hide an instance if it's currently visible
Updating content while hovering over an interactive element will not break the mouseleave to hide it
For instances with a delay, if the tippy began to transitioning out and the instance was triggered again before unmounting, it will ignore the delay
Window blur listener will only blur references whose tippy is not visible upon blur
If using multiple tippys on a single element, screenreaders will now announce all of them
In touch and keyboard contexts, delay is always 0

Installation

Package Managers:

# npm
npm i tippy.js@5

# Yarn
yarn add tippy.js@5

CDN:

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