Right here’s Atif Afzal on utilizing a <div> that’s completely on the web page the place tooltips are added/eliminated and the way they carry out vastly higher than plopping those self same tooltips proper into the <physique>. It’s probably not mentioned, however the cause you place them that high-up within the DOM is so you may completely place them precisely the place you should on the web page with out having to cope with hidden overflow or relative dad and mom and the like.
To my amazement, simply having a separate container with out even including the [CSS] include property mounted the efficiency. The primary drawback now, was to clarify it. First I assumed this may be some inner browser heuristic optimizing the Recalculate Fashion, however there is no such thing as a black magic and I found the rationale.
The trick is to keep away from compelled recalculations of fashion:
[…] The tooltip container shouldn’t be seen within the web page, so modifying it doesn’t invalidate the entire web page render tree. If the tooltip container would have been seen within the web page, then the entire render tree can be invalidated however on this case solely an impartial subtree was invalidated. Recalculating Fashion for a small subtree of three doesn’t take plenty of time and therefore is quicker.
Seems like popper.js was used right here, so it’s a must to be sensible about it. We use toast messages on CodePen, and it’s the one third-party part we use for the time being: react-hot-toast. I checked it, and never solely will we tuck the messages in a <div> of our personal, however the library itself does that, so I believe we’re within the clear.
At Marketing Solution Australia we strive to deliverer elegant responsive websites for your business integrated with our personal SEO Optimization package to bring your pages on the first page of Google.