Inspect an element shown on hover

To inspect an element with Chrome DevTools, we usually right-click the element and choose Inspect from the context menu. However, it doesn't work with a dynamic element that is displayed when we hover on a given element. A JavaScript tooltip is a common example.
There are a few ways to inspect that kind of elements.

Trigger the mouseover event

$0.dispatchEvent(
new MouseEvent('mouseover', {
view: window,
bubbles: true,
cancelable: true,
})
);
$0 represents the current inspected element
It simulates the mouseover event that is supposed to happen when we hover on the original element.

Pause the script execution

Use debugger

It's similar to the previous way.
handler = (e) => {
if (e.key === 'Enter') debugger;
};
document.addEventListener('keydown', handler);
Running debugger here will pause the script execution when we press the Enter key. Of course, you can replace it with other key.
Once you don't want to monitor the dynamic element anymore, you can stop listening to the keydown event:
document.removeEventListener('keydown', handler);

Track subtree modifications

Break on subtree modifications
Break on subtree modifications
If the dynamic element, a tooltip for example, is generated in the parent element of the target element, then you should choose the parent instead of the body element