Question

Currently I’m working on a website where I’d like to show some toolstips for specific DIV elements. My weapon of choice is jQuery Tools.

So when I use $(".toolTipMe").tooltip(); it works quite nice. As soon as I hover the element a new DIV appears in the DOM:

<div class="tooltip" style="display: none; position: absolute; top: 313.65px; left: 798.5px;">foo</div>

However the design is done by our very own css-monster (you should this this guy!) and he’s using a a lot of z-indexes so the .tooltip-DIV is behind the other elements.

Now the question:
The following code in our .css File is not having any effect:

.tooltip{
    z-index: 9001;
}

In fact the attribute is not even showing up when debugging the website. But the following will work:

$(".toolTipMe").tooltip({
  onShow: function(){
    $(this).css("z-index","9001");
  }
});

I’m not sure how CSS Rules are applied for dynamic inserted DOM Elements but what I really detest in the current workaround is the mixture of functionality and style. Any chance to clean up this mess? :C

Answer 1

I am not familiar with jquery tools, but if your z-index is not working you must need a !important tag or making it position:relative or position:absolute