Aquí está Atif Afzal sobre el uso de un <div> que está permanentemente en la página donde se agregan / eliminan las descripciones emergentes y cómo funcionan mucho mejor que colocar esas mismas descripciones directamente en el <body>. En realidad, no se discute, pero la razón por la que los coloca tan arriba en el DOM es para que pueda colocarlos exactamente donde lo necesita en la página sin tener que lidiar con el desbordamiento oculto o los padres relativos y cosas por el estilo.
Para mi asombro, solo tener un recipiente separado sin siquiera agregar el [CSS] contain propiedad fija la actuación. El principal problema ahora era explicarlo. Primero pensé que esto podría ser una heurística interna del navegador que optimiza el Recalculate Style, pero no hay magia negra y descubrí la razón.
El truco consiste en evitar recálculos de estilo forzados:
[…] El contenedor de información sobre herramientas no está visible en la página, por lo que modificarlo no invalida el árbol completo de representación de la página. Si el contenedor de información sobre herramientas hubiera estado visible en la página, entonces se invalidaría el árbol de representación completo, pero en este caso solo se invalidaría un subárbol independiente. Recalculating Style para un pequeño subárbol de 3 no lleva mucho tiempo y, por lo tanto, es más rápido.
Parece que aquí se usó popper.js, así que debes ser inteligente al respecto. Usamos mensajes tostados en CodePen, y es el único componente de terceros que usamos en este momento: react-hot-toast. Lo comprobé, y no solo guardamos los mensajes en un <div> por nuestra cuenta, pero la biblioteca en sí misma lo hace, así que creo que estamos libres.