1

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

1 Answers1

3

A cool trick to capture mouseenter:mouseleave events:

  1. Open the console (in the browser)then enter:

setTimeout(() => {debugger;}, 5000)

press enter and hover above the item after the time 5s you can debug/ style the element.

  1. Open source tab in the browser then press F8
dt170
  • 417
  • 2
  • 12
  • This is an amazing idea! Works for a lot of things. Far better than trying to put breakpoints in the right places or firing events manually. – steinybot Aug 23 '22 at 00:51