Performance issue due to adding popper classes to body on page with large number of DOM nodes

[huynhtehoa]

Problem

• When a page contains a large number of DOM nodes, toggling floating elements becomes very slow. This happens because floating-vue is adding/removing classes directly on body, which triggers reflowing that affects a lot of nodes

• This is extremely impactful, especially in analytics application that renders tables with many cells

• I do not see that these added classes are used anywhere so I guess they are either legacy or for customization ability

• Using the Egdge performance tool, we could see that $_applyShow and $_applyHide are affecting many elements during the style recalculation phase

Solution

• Added an addPopperClassesToBody option to disable the adding-popper-classes-to-body behavior
• Default to true to avoid breaking current behavior

[netlify[bot]]

✅ Deploy Preview for v-tooltip ready!

Name	Link
🔨 Latest commit	e348bcea3133edf36892505332f0750690498828
🔍 Latest deploy log	https://app.netlify.com/sites/v-tooltip/deploys/65b360c2b69fe00008b29f16
😎 Deploy Preview	https://deploy-preview-1019--v-tooltip.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.