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.
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.
Using this method, you will be able to see all the CSS changes in the hover state as seen in the following picture.
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.
If you accidentally clicked somewhere else and triggered the breakpoint by mistake, you can always unpause the state by clicking the play button.
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.
I was always able to get away with just looking for the
:hover style. Other times, I would be able to apply the
Thanks for reading!