There is another way to trigger the same behaviour: You can use the shortcut for your dev tools to "pause script execution". As soon as the code executes, the debugger statement is hit. This way, you have enough time to open the tooltip. Luckily, this is quite easy with setTimeout: > setTimeout(() =>, 3000) We just need a way to delay it, so that we have a chance to open the tooltip. No more events are fired and script excecution is completely paused. You might have noticed it already, that happens when you place debugger somewhere in your JS code or hit a breakpoint.Ī debugger statement, when the DevTools are open, kinda freezes the DOM. What we want to do, is freeze any changes to the DOM, as long as we want to inspect it.
The first solution has already been posted on CSS Tricks as Timed Debugger, but it is still worth repeating. Today, I will show you two quick and easy ways (they are pretty similar though) to work around this issue. Since as soon as you try to inspect it, it is gone. That might be a bit of a problem, if you want to customize the HTML/CSS of the tooltip and need to inspect the element. They appear if you hover the element with the mouse cursor and vanish as soon as your mouse leaves the element. Those tooltips are controlled via JavaScript. Popular CSS frameworks like Bootstrap often include a functionality for tooltips.
0 kommentar(er)
