Context: AngularJS 1.5 front end having UI-Bootstrap library for some of the controls like popover and tooltip.
Issue: In record listing page the tooltips were displaying only the arrow (triangle) with no content. Therefore we needed to figure out where the other part of the tooltip was within the html page. Since this tooltip mark up is generated on the fly by bootstrap when we hover on a target element, we had to freeze the application UI at the hover state. I was not able to retain the popover and investigate things on devtools. After trying all possible things with web dev tools (opens when F12 is pressed on google chrome) we found something in Stack Overflow that gave a hidden gem technique. Though I do not have the exact URL now, I grabbed a screen shot of the method to follow. I am recording this here because I know it will be beneficial for me in future as well as to somebody who would stumble upon such a scenario.
