The most straightforward way to enable tree-shaking is to use Popper Lite and configure it with your needs.
Instead of :
// ⌠Imports all of Popper!
import { createPopper } from '@popperjs/core';
Use :
// ✅
import { createPopper } from '@popperjs/core/lib/popper-lite';
Popper Lite only comes with the following modifiers :
* popperOffsets
* computeStyles
* applyStyles
* eventListeners
This effectively achieves the bare minimum functionality, and is around 3 kB minzipped. If 3 kB is still too much for your application, we recommend trying out CSS tooltip alternatives which are as tiny as 1 kB. Please note that such libraries have many disadvantages that Popper doesn't, so assess the trade-offs where necessary.
Now, you'll need to add the modifiers you need. These are accessible under the @popperjs/core/lib/modifiers/ directory.
Generally, we recommend flip and preventOverflow since these are the most attractive reasons for using Popper in the first place:
import { createPopper } from '@popperjs/core/lib/popper-lite';
import flip from '@popperjs/core/lib/modifiers/flip';
import preventOverflow from '@popperjs/core/lib/modifiers/preventOverflow';
createPopper(reference, popper, {
modifiers: [flip, preventOverflow],
});
