The other day I had to debug a mouse hover tooltip at work and the problem was that the hover element was appearing in the wrong position; It was supposed to appear directly above the link, but it was completely offset to the left side.
For this post, I will be using Chrome’s Developer Tools and I will be using Bootstrap’s tooltips as an example. The first image is an example of how the tooltip should appear, and the second picture is an example of how the hover was offset.
Bootstrap Tooltip Hover (Expected Behavior)
Bootstrap Tooltip Offset (Unexpected Behavior)
Debugging CSS Hovers
If this was just a pure CSS hover, you could force the CSS :hover state by right clicking on the element > Force Element State > :hover. After forcing the hover state, you can proceed to debug normally.
Debugging a CSS hover state with Chrome
Using this method, you will be able to see all the CSS changes in the hover state as seen in the following picture.
Forcing the hover state in Chrome
Notice that the only change in the hover state is the color of the link and the underline; It is also missing the actual tooltip. If this is the case, this is usually an indicator that there is JavaScript involved and that there is a mouseover event attached to the element; You will need to force the hover state in JavaScript.
Debugging JavaScript Hovers
When debugging JavaScript, it is pretty similar to debugging in Java. You can set breakpoints for where the execution would stop. However, it’s a little different in JavaScript since it is an event based language; There is a different concept of breakpoints called “Event Listener Breakpoints” which means the program would pause after a certain event is triggered. In this scenario, I wanted the program to Pause after I clicked on something, so I went ahead and set a breakpoint for a mouse click event.
Adding a Event Listener mouse click break pointer
Next, I would hover over the tooltip and then click to trigger the breakpoint. Afterwards, you will see something similar to the following screenshot. The browser will go dim and you will see a message telling you that it is Paused and you will see the hover.
Paused after mouse click breakpoint
If you accidentally clicked somewhere else and triggered the breakpoint by mistake, you can always unpause the state by clicking the play button.
After hitting a break point, it will say “Paused” on the right
When Paused, you can always click the play icon to resume the normal flow
When you’re in the pause state, you can start debugging the element and see what CSS styles are being applied to the hover element. I noticed you cannot just use the selector and visually select your element, so the next best option is to just search for the element; I searched for “Tooltip on top”.
Now you can see the styles that are offsetting the tooltip and adjust the CSS styles as needed.
After pausing, you can now debug the CSS
After pausing, you can now fix the CSS
I was always able to get away with just looking for the :hover style. Other times, I would be able to apply the display: block; style to the hidden element to reveal the hover element. This was one of the first times where those techniques were not applicable because the element was being injected into the DOM via JavaScript; In turn, this forced me to discover and adopt a better practice which I hope would be useful to you as well.
Thanks for reading!