'Why is :hover not working in chrome devtools?

I am testing the tooltip component in the Angular component library below:

I want to leverage Chrome's Devtool's :hover functionality, which means that I want to use the functionality below enter image description here But when I tried it on the tooltip element mentioned in the link above, it doesn't work. Could anybody tell me why?

cssangulargoogle-chrome-devtools


Solution 1:[1]

I found out that the event bound to the element is "mouseenter" instead of "hover", so I did the following to make it work

var evt = document.createEvent("HTMLEvents");
evt.initEvent("mouseenter", false, true);
element.dispatchEvent(evt);

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 SWIIWII

Related Questions