I ran into the same problem about 20 years ago when implementing hover-based dropdown menus on a website. It was only about 10 lines of JS and a couple global variables but I was the only person who understood it. :-P<p>(These days I would have included more comments.)<p>Naturally, there was a fallback to pure CSS menus, because we weren't barbarians.
I greatly appreciate this attention to detail, and there isn't enough of this in the world. For example, in Visual Studio popups on hover happen so fast you can barely select anything, or you end up clicking on the popup instead of selecting a word.
Chris Coyier also posted a version using only HTML/CSS, no JS: <a href="https://blog.master.dev/delayed-then-instant-tooltips-with-html-css-alone/" rel="nofollow">https://blog.master.dev/delayed-then-instant-tooltips-with-h...</a>
The pure CSS version seems more interesting to me: <a href="https://blog.master.dev/delayed-then-instant-tooltips-with-html-css-alone/" rel="nofollow">https://blog.master.dev/delayed-then-instant-tooltips-with-h...</a>