1

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

1 Answer 1

1

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

11
  • Only works for CSS but not for JavaScript-based hover effects. Sep 14, 2013 at 13:42
  • It's hard to help when I don't see the code, though two advices: Sep 14, 2013 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; }) Sep 14, 2013 at 13:51
  • Thanks Michal, How did you open the dropdown you show with :hover, etc? Sep 14, 2013 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. Sep 14, 2013 at 13:53

You must log in to answer this question.

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