Inspect element that only appear when other element is mouse overed/entered

Question

Often I want to inspect an element (e.g. tooltip) that only appears when another element is mouse overed/entered. The element that appears, is made visible via jQuery\'s mousee

Answer 1

While @SomeGuy's answer is excellent (t-up for animated gifs), as an alternative you can always do it programmatically. Just pop open the console and type in the event name

document.getElementById('id').dispatchEvent(new Event('event-type'));

(with pure javascript specific syntax may vary by browser)

Even easier with jQuery:

$('#id').trigger('event-type');

In your example (http://getbootstrap.com/javascript/#tooltips), open the console and type in, for example:

$("button:contains('Tooltip on right')").mouseenter();

And the tooltip appears in the DOM and can be manually inspected/modified:

Tooltip on right

---

As in the comments, if you move the mouse pointer over the page frame, you can trigger other events such as mouseout. To prevent this you can press F8 (as in the acc. answer) or type debugger; (which is its script equivalent)