jQuery UI 1.2 tooltip problem

I have trouble showing the tooltips. They do show up, but for some reason they seem to either be behind other content, or having an opacity of 0.1 - they're almost impossible to read.

I've tried to change the z-index on the .ui-helper-hidden-accessible class, without success - I'm a little at a loss on what to try next.

Anyone have an idea what the problem can be? All suggestions appreciated.

 

Are you using a separate bootstrap somewhere in there too by any chance? It may / will mess up the UI tooltips.

 

Nah. You should know better than to ask me that

The whole site is coded with jQuery for javascript, and it's definitely something with the jQuery UI, because if I downgrade to the version prior to 1.2, it works just fine. By all means, I can code something else that does the tooltips, I'm just annoyed that I can't figure out what causes the problem.

And the tooltips show up - it's just that they show up as close to invisible as possible. You can see the problem in action if you go here: http://cntrl.no and login to the demo site with the provided login credentials. If you hover over anything in the menu, you'll notice that the tooltips does show, but almost impossible to see.

 

The only thing I can see that could possibly cause that is #mainmenu_top li.active,#mainmenu_top_compact li.active{opacity:0.5}

But it could be something else.

 

Yeah, that has nothing to do with it, because the tooltips have nothing to do with those CSS-rules. Besides, there are other tooltips on the site, which appear just the same, without being in the menu. I think I'll have a look at how the tooltip functionality is done in the jQuery UI javascript, and check to see what differences they've made between the previous version and the new version.

 

Found the problem - simply did it the long, manual way, removed all opacities on elements in the CSS, and reloaded page till I found what changed the visibility. Seems there has been a change between previous version and latest version of jQuery UI (not documented, of course), and the problem lies in opacity on two different classes:
.ui-widget-overlay and .ui-widget-shadow

Changed those in the stylesheet, and everything now works as it should. Not entirely sure where these goes, and what other elements might be affected, but for my use, the fix works just fine. These are added classes via jQuery, so it should only be pertinent to check if you use widgets and / or other functionality. It does not affect Datepicker, draggables at least. I couldn't remember if I use other functionality right now.