Closed atomiks closed 4 years ago
Just interested why Tippy would need to increment its major? Does it mean that its API will change and have breaking changes?
Tippy exposes Popper APIs in popperOptions
and instance.popperInstance
, which have changed, so they'll break when we upgrade.
Here's the article: https://dev.to/fezvrasta/smarter-tooltips-and-popovers-with-popper-2-44bh
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.
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 π€
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.
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.
You can now integrate these properly with the added instance.unmount()
method and being able to set animation: false
.
Import paths may change, I'm not sure of the new structure though. These changes aren't final either
popperOptions
& instance.popperInstance
have changed with Popper 2 upgradedistance
, offset
, flip
, flipBehavior
, flipOnUpdate
, boundary
(I'm delegating all non-essentials to popperOptions
).tippy-popper
is gone as a selector class since there's no styling involved on it (no attribute etc)Promise
, Object.assign
, Array.prototype.find
)allowHTML
is false
by default for default security protectionmultiple
prop has been removed due to typing issuesupdateDuration
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 π€¦ββ)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/153getReferenceClientRect
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/@atomiks so if I want to use this alpha version with tippy.js-react what should I do?
@djkalmyk I'll probably release 6.0.0 this weekend anyway π
Some docs improvements I worked on:
.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.
@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.