CSS for dynamic inserted elements

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

In Chrome or Firebug you can check what attributes an element has. Even dynamic ones. Maybe there is something wrong with the selector? — Remy
– Remy, Commented Feb 28, 2012 at 10:00
I'm pretty sure you can add a tooltip without the need of JS (or jQuery for that matter)! Cf. bramvanroy.be hover over one of the links. This is done with ONLY css(3). This may solve some of the hard times you're getting and it's easy to implement. — Bram Vanroy
– Bram Vanroy, Commented Feb 28, 2012 at 10:02
Like @Remy says, maybe there's something wrong with the selector. In your CSS you use .tooltip but in your JS you use .ui_day... — Alex
– Alex, Commented Feb 28, 2012 at 10:03
Well the selectors are ok because the DIV with the tooltip is showing up. It's merely behind other elements. When using Firebug I see no z-index attribute using plain CSS. However when setting it in Firebug or via JS it works. — nuala
– nuala, Commented Feb 28, 2012 at 10:05

Rui Carneiro · Accepted Answer · 2012-02-28 10:06:28Z

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

answered Feb 28, 2012 at 10:06

Rui Carneiro

5,6815 gold badges35 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

udidu · Accepted Answer · 2012-02-28 10:22:01Z

0

In jquery tools tooltip you need to specify the z-index inside the tooltip constructor like:

$(".toolTipMe").tooltip({ z-index: '9001'});

I'm not sure if it is z-index or zindex.. check it out

answered Feb 28, 2012 at 10:22

udidu

8,6167 gold badges53 silver badges69 bronze badges

Collectives™ on Stack Overflow

CSS for dynamic inserted elements

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related