Releases: atomiks/tippyjs
v5.0.0
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, supersedesgroup()
for smooth transitions - New
sticky
behavior to checkreference
orpopper
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 ofclick
- 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 thedelay
- 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>
v4.3.5
Fixes
- Optimize
sticky
option by preventing repaints on every animation frame - Place injected
style
node before the firststyle
orlink
tag instead of first child - Reduce CSS size slightly
- Fix leak with document click listener not being removed if tippy was hidden before it was shown when using
delay
- Fix #532: Add
referenceNode
property for followCursor (NOTE: awaiting popper.js@1.16.0 release)
v4.3.3
v4.3.2
Fixes
- Mounting behavior (IE11 scrollbar flicker) (#509)
followCursor
fixes (respects boundary & fix regression where initial was not placed correctly on touch devices on first show)- Ensure
destroy()
's unmounting of the tippy can never be impeded - Fix the longstanding interactive scrolling issue
- Fix path selector having
pointer-events: auto
(#504)
v4.3.1
v4.3.0
Features
- Added
triggerTarget
option to apply the trigger listeners to a different node from the positioning reference - Added
onTrigger
option to allow calls to.set()
to change the reference position and instance props based on the event before the tooltip is shown without interrupting the lifecycle (unlikewait
) - Added ability to pass a ReferenceElement to HideAllOptions.exclude for references with multiple tippys
Fixes
- Make
tippy.group()
andupdateDuration
updateable - Fix when
popperOptions.onCreate
andpopperOptions.onUpdate
are called so they match the actual invocations by Popper.js - Fix
followCursor
not respectingpopperOptions.modifiers.preventOverflow.padding
- Fix multiple tippys from only displaying one if using touch and
hideOnClick: true
- Fix the tooltip moving with the cursor if over the popper element when using
followCursor: '{horizontal, vertical}'
andinteractive: true
- [TypeScript] Fix instance.reference type to account for VirtualReference
v4.2.1
v4.2.0
Features
- Add
x-placement
attribute to tooltip node, allowing you to style without needing to use the.tippy-popper
selector
Example
Before:
.tippy-popper[x-placement^='top'] .tippy-tooltip.my-theme .tippy-arrow {
border-top-color: pink;
}
After:
.tippy-tooltip.my-theme[x-placement^='top'] .tippy-arrow {
border-top-color: pink;
}
Fixes
- Apply correct mutations when calling
.set()
with apopperInstance
dependency update
v4.1.0 - TypeScript rewrite
Minor release was bumped due to large TypeScript refactor and a minor package fields change.
Fixes
- Improves types due to refactor (#441).
Props
interface was deprecated in favor ofOptions
. UseRequired<Options>
to mimic the internalProps
interface. - Use unminified code in
"main"
and use the"unpkg"
field (#445) - Fix obscure Chrome setTimeout issue (#447)
- Remove will-change properties: seems to improve animation FPS
- Prevent overwriting user-defined
preventOverflow
padding - Add safety early return to
tippy.group()
v4.0.4
This release mainly fixes some minor CSS issues
Fixes
- Make
rem
units align with whole pixels using 16px base default - Size round arrow closer to default sharp arrow so it reaches the edges of the popper + reduce arrow margins overall
- Fix infinite loop when
popperOptions
isundefined
instead of an object - Fix small gaps when using the round arrow in Edge/IE11
- Fix longstanding issue (since v0) of Popper's
preventOverflow
not taking into account thedistance
prop