Don't attach tooltips to document.body

Atif Afzal's insightful approach to tooltip performance optimization involves using a dedicated, permanently present <div> container for managing tooltips. This method significantly outperforms directly attaching tooltips to <code>document.body. The key advantage, although not explicitly stated, lies in absolute positioning. This dedicated container allows for precise tooltip placement without the complexities of hidden overflows or relative parent elements.

Surprisingly, simply using a separate container, even without the contain CSS property, dramatically improved performance. The explanation lies in avoiding forced style recalculations. Since the tooltip container remains invisible, modifications within it don't trigger a complete page render tree invalidation. Only a small, independent subtree is invalidated, resulting in significantly faster recalculation.

This technique is relevant to libraries like Popper.js. The author notes that CodePen's use of react-hot-toast for toast messages employs a similar strategy, adding an extra layer of optimization by nesting the messages within their own <div> container.</div>