from Hacker News

Don't attach tooltips to document.body

by atfzl on 8/19/21, 6:26 AM with 92 comments

by habosa on 8/21/21, 1:02 PM
This is an excellent and technically deep post, I learned a lot reading it and I'm going to make sure I'm using my tooltips properly.
It's a shame that most of the comments here are just people criticizing web dev frameworks and browsers.
by Agentlien on 8/21/21, 5:39 AM
This issue of needlessly forcing the system to recalculate a tree of positions and bonds is also common in other UI contexts such as desktop applications and game UIs.
In fact, in games it also happens with the transforms of objects and has been the cause of a number of performance issues during development of AAA games I've been part of.
by Pxtl on 8/21/21, 7:01 AM
... this post perfectly encapsulates why I hate web development. A painful and easy to miss bug when trying to reimplement a GUI feature that's been available in every decent GUI framework for over two decades.
by myfonj on 8/21/21, 7:52 AM
As for why the parent render tree invalidation is necessary, consider
```
    <style>
      main:only-child * { /* ... */ }
    </style>
    <body>
      <main>lots of stuff </main>
    </body>
```
When second node is appended to <body> our CSS selector no longer matches so the rule stops being applied and content of the <main> is no longer styled.
When there is (next) sibling wrapper present, anything what happens inside it cannot affect the <main> in our example: in CSS there simply is currently no way to target element according it's next sibling inner structure. (There is one for previous sibling: `prev:empty + next {}`: when prev stops being empty, rule stops to match.)
by foobar33333 on 8/21/21, 5:49 AM
It would be nice if the browser title text feature didn't flat out suck. Why is there no way to show tooltips immediately rather than having to wait a few seconds. Seems like every website reimplements them because the browser ones are useless.
by chrismorgan on 8/21/21, 2:44 AM
A remark on the two diagrams following “Then the CSS is parsed and browser creates the CSSOM (CSS Object Model)”: they show body as the root, but would be more accurate if they showed html as be the root and head as hidden by `display: none`.
Consider this style rule set which does just what it looks like:
```
  head,
  title,
  style,
  script {
    display: block;
  }
```
by ComputerGuru on 8/21/21, 4:47 AM
I imagine another option if you need to assign a node to a class and then measure its size/location (which is probably quite often) that you can basically take some preliminary/initial values, attach the class, and use an onresize handler to trigger a remeasurement once the reflow has completed at a pace of the browser’s own choosing?

by sandstrom on 8/21/21, 7:12 AM

At the bottom of the article they mention:

  What happened here? The tooltip was attached to the tooltip container and not to the body.
  This invalidated a much smaller subtree, which was the tooltip container. The tooltip container 
  is not visible in the page, so modifying it doesn’t invalidate the complete page render tree.
  If the tooltip container would have been visible in the page, then the complete render tree 
  would be invalidated but in this case only an independent subtree was invalidated.

So the tooltip container needs to be hidden with e.g. `display: none`?

by namelosw on 8/21/21, 5:28 AM
It's the same reason that most React apps start with ReactDOM.render(<App />, document.getElementById('app')) instead of ReactDOM.render(<App />, document.body).
IIRC there were many tutorials in the early days of React that mentioned this.
by quickthrower2 on 8/21/21, 3:20 AM
And Do: profile your web app!
by geuis on 8/21/21, 3:59 AM
I appreciate these kinds of frontend deep dives.
by sidcool on 8/21/21, 6:59 AM
I am not a UI dev, but I have seen some noise about using Canvas based text rendering. What is HN's opinion on this?
by hugneutron on 8/21/21, 4:13 PM
The article didn’t seem to mention anything about performance in other browsers, which I find surprising.
by faeyanpiraat on 8/21/21, 8:12 AM
... Next steps are paint and composting ...
That step seems unrelated
by Aeolun on 8/21/21, 6:58 AM
Having worked with React a lot. I could see the invalidation answer coming from a mile away.
Glad all that knowledge is useful in different contexts though.
by TekMol on 8/21/21, 5:18 AM
Talking about tooltips:
Did anybody get Popper to work as an ES6 module? I tried for a while and gave up.
by imranghani on 8/21/21, 4:43 AM
Really insightful.
by bserge on 8/21/21, 8:00 AM
Wait, you guys use tooltips?
Some websites don't even have text accompanying their unintuitive but kewl looking icons.
The future is now, old timers!
by catmanjan on 8/21/21, 4:38 AM
Yet another browser based leaky abstraction... Looking forward to the inevitable trend flip back to native ui!