Dev tools :hover event does not trigger PrimeVue tooltip component. How can the tooltip be triggered for debugging?

Question

I am unable to manually trigger the PrimeVue Tooltip component using the Chrome Devtools (Likely same issue with other browser dev tools, but not tried).

I tried selecting the <input> element in the DOM, and tried to apply the "Force State > :hover" feature in the right click context menu of dev tools.

How can this tooltip be debugged? Reason for needing to is that the styling is slightly off, and the arrow part of the tooltip is hidden and not correctly lined up with the input and the tooltip itself.

I figured out the solution (see my below answer), but posted here in case others also have this problem. Feel free to also suggest other solutions yourself.

Answer 1

Did some trial and error and further investigation, and found that the PrimeVue Tooltip does not use the :hover event (I wish they had mentioned that in their documentation).

Instead, it uses the mouseenter event.

This makes sense though, as they likely want to time when the mouse triggers the tooltip, and when it leaves the element, so that they can properly implement things like the delay show and delay hide config features of the component.

In order to debug this using dev tools, you can do the following:

1. Find the element (or whatever element you have attached the tooltip to), and select it in the Devtools DOM.

2. In the console, pre-create the mouseenter event

var event = new MouseEvent("mouseenter");

3. Trigger the mouseenter event on the element you selected in the DOM, making sure the element you want is still selected.

$0.dispatchEvent(event)

Credit for the above steps go to another SO answer for a different question.

To hide the tooltip, you can either use your mouse to hover over the element and then move it away, or use the above steps (change the event name to mouseleave) to trigger a mouseleave event.