Don’t attach tooltips to document.body

Instead of attaching tooltips directly to document.body, attach them to a predefined div in document.body.

BAD

Code language: HTML

<body>
    <!-- temporary div, vanishes when tooltips vanishes -->
    <div>my tooltip</div>
<body>

GOOD

Code language: HTML

<body>
    <!-- this div stays forever, just for attaching tooltips -->
    <div id="tooltips-container">
        <!-- temporary div, vanishes when tooltips vanishes -->
        <div>my tooltip</div>
    </div>
<body>

Introduction

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.

Read on in the source link for details.

Source link

Don’t attach tooltips to document.body - Atif Afzal

Don't attach tooltips to document.body

BAD

Code language: HTML

GOOD

Code language: HTML

Introduction