0

Is there anything similar to activating the hover state (CSS) for activating javascript events?

enter image description here

So I'm using Angular Materials tooltip. Everything works fine. I need to style the tooltip as per the theme but can't inspect the element as it's only visible when the mouse moves over the element.

https://material.angular.io/components/tooltip/examples#tooltip-custom-class The custom class works and I can change the color. I'd like to change the width and other CSS properties but I can't inspect the element to check what styles are getting applied by default.

So the main question is: Is there anything similar to activating the hover state (CSS) for activating javascript events (mouseover/mouseenter)?

  • 1
    Does this answer your question? [Is there any way to simulate onmouseover in Developer Tools?](https://stackoverflow.com/questions/37231201/is-there-any-way-to-simulate-onmouseover-in-developer-tools) – Fabian S. Oct 28 '21 at 13:42
  • Not really. It's a hacky way to go about it. I was inquiring if there was a way to directly do it from the dev tools rather than writing javascript in the console. @FabianS. –  Oct 28 '21 at 18:25
  • 1
    Fabian's answer is the best way to accomplish this goal. Use the `.dispatchEvent` method with `new Event("mouseover")` for testing outside something like puppeteer – async await Oct 29 '21 at 01:42

0 Answers0