Super User is a question and answer site for computer enthusiasts and power users. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

Let's say I created some tooltip which displays a popup when the cursor is placed over a given part of the page, and removes it when I move the mouse. For an example, see http://jsbin.com/aCoboQo/1 and try to put your mouse over the popup.

I now wish to troubleshoot it and need to check the CSS using Firebug or some other similar tool.

I currently deal do this by editing the JavaScript and comment out the un-hoover.

It would be nice to somehow lock the browser after the popup is shown, so then I could navigate to the popup (and not have the popup disappear) and inspect the HTML and CSS.

Is this possible with any standard browser (ie, chrome, firefox/firebug, etc)? If so, how?

Thanks

share|improve this question

If you have Firefox:

  1. select an object
  2. right-click, choose Inspect element from dropdown menu
  3. once "inspecting", expand another dropdown menu (as seen on the attached screen)
  4. you may now select and hold desired state (ie. :hover)

The browser will hold it till refresh.

screenshot

share|improve this answer
    
Only works for CSS but not for JavaScript-based hover effects. – ThiefMaster Sep 14 '13 at 13:42
    
It's hard to help when I don't see the code, though two advices: – Michał Sacharewicz Sep 14 '13 at 13:50
    
(a) try to controll popup via CSS. You can ie. create <span classs="TextWithTooltip">Text with hoover effect<span>Tooltip Text</span></span>, then control appearance of sub-span (.TextWithTooltip:hover>span { display: block; position: relative; }) – Michał Sacharewicz Sep 14 '13 at 13:51
    
Thanks Michal, How did you open the dropdown you show with :hover, etc? – user1032531 Sep 14 '13 at 13:51
    
(b) you may alternatively control the visibility of the tooltip via class assignment, for the sake of simplicity .invisible might do the job; then via disabling display:none in that class you would immediately see all the tooltips. – Michał Sacharewicz Sep 14 '13 at 13:53

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .