Today I was trying to apply some custom styles to a Bootstrap tooltip. This is adequately explained in the docs, but I was having trouble figuring out what CSS selector I'd need in order to get the styles to apply. Trouble was, when I hovered away from the tooltip element, the tooltip would disappear, so I couldn't inspect the element to see what selectors were overriding my styles! 😡

In some scenarios, you can use the browser dev tools to force a :hover state, but since the Bootstrap tooltip is triggered by jQuery and not CSS, this doesn't cause it to appear. 😢

HOWEVER, let's not get too daunted. There are other powerful things the dev console can do, so let's see if one of these other tools can be repurposed for the job. Hmm... jQuery is just fancy Javascript, and when we want to pause Javascript, we can do that by setting breakpoints, so we could go find the exact line in our Bootstrap code that triggers the tooltip and breakpoint it. But that seems very inefficient, and if it's being pulled in minified from a CDN it might not even be possible. So scrap that.

But, wait a second... we can also just pause execution manually* with the power of F8 / ⌘\. Yeah, I think that just might do it!

Steps:

1. Make sure you're on the Sources tab in the dev console
2. Hover over the tooltipped element
3. Use your keyboard shortcut to pause execution
4. Now you can go back to the Elements tab and inspect the tooltip to your heart's content!

Now positioning the tooltip dynamically is a whole different beast 🐲 We'll tackle that another time, perhaps.

It's good to note that you can also use this little trick to inspect any element that only appears via Javascript, not just tooltips.

Until next time, may your {} + [] always evaluate to 0.

*This is the shortcut in Chrome, I don't know it offhand for other browsers