Don’t attach tooltips to document.body

submited by

Style Pass

2021-08-19 06:30:04

Tooltips in our app were taking >80ms. And during this time, the main thread was blocked, you couldn’t interact with anything.

Other components like modal, popover, dropdown had similar performance issues. In some cases, a modal took more than 1 second to appear while making the UI unresponsive.

The main reason for the slowness of Tooltip was Recalculate Style being called at the end of mouseover event call stack which takes a lot of time.

This investigation started off with trying to use the css property contain to signal the browser about the containment of a particular DOM Node so that the Recalculate Style will not affect all the nodes. But applying the property on the element where we hover didn’t help as the tooltips were being rendered outside of the element, directly as a child of the body of the page.

Next step was to try rendering the tooltip into a separate container and not directly in the body. Then we’ll set the contain css property to signal the browser to not do the expensive Recalculate Style.