Thanks for suggesting! As a general note, I'm working on better hover behavior for elements with titles (including abbreviations specifically), and fixing this issue will be a part of it. It might take some time, but the logic is the same, so it wouldn't make sense to solve this specifically.
In the mean time, the following script should mitigate the issue (adapted from your code example to remove jQuery):
Here's a video of the new ellipsis behavior that is landing next week in Insiders:
All elements that have ellipsis will now show a small tooltip when they overflow. The video shows that this is also the case for the header title that wraps on scroll. Additionally, content elements that have a title attribute can be opted into this new behavior as well by enabling the new content.tooltips flag:
This replaces the ugly native tooltips that are not very user friendly:
Insiders 4.15.0 was just released and comes with improved support for tooltips🎉 This release also includes the behavior mentioned above, automatically adding a tooltip to overflowing navigation titles.