Glad to hear your code is working. I was also handling mouseover, but I switched to handling mouseenter. Handling mouseenter seems to result in a more stable behavior of the tooltip. When I was handling mouseover, I noticed that moving mouse very quickly sometimes resulted in the tooltip remaining on the screen. I think using either event is fine (as long as we pass the FCC tests 
).
I forgot to mention that you probably want to set
pointer-events: none; /* critical to disable mouse */
for the tooltip attribute. This is my styling for #tooltip in my CSS file
#tooltip {
position: absolute;
max-width: 200px;
height: auto;
padding: 5px;
color: white;
background-color: rgb(6, 44, 56);
border-radius: 5px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
pointer-events: none; /* CRITICAL disable mouse */
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
}
Several different sources indicated to do this. You might try it and see what happens.
Lastly, a minor point. Since you’re setting opacity, I don’t think you need to set visibility.