2012-02-28 7 views
1

現在、私は特定のDIV要素のツール・ストラップを表示したいウェブサイトに取り組んでいます。私の武器はjQuery Toolsです。ダイナミックに挿入された要素のCSS

したがって、私が$(".toolTipMe").tooltip();を使用すると、かなりうまくいきます。できるだけ早く私は、新しいDIVは、DOMに表示要素を置くよう:デザインは我々の独自のCSS-モンスターによって行われますが

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

(あなたべきこのこの男!)、彼はZ-のAAロットを使用しています.tooltip-DIVは他の要素の背後にあります。

今の質問:私たちの.cssファイルに次のコードは、任意の効果を持っていない
:ウェブサイトをデバッグするとき

.tooltip{ 
    z-index: 9001; 
} 

実際には属性も表示されません。しかし、次のように動作します:

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

私はCSSルールは、動的に適用されているかどうかはわかりませんDOM要素を挿入しますが、私が本当に現在の回避策に嫌悪することは機能性とスタイルの混合物です。この混乱をきれいにする機会はありますか? :C

+0

クロムやFirebugのでは、要素が持つ属性の内容を確認することができます。ダイナミックなものさえ。おそらく、セレクタに何か問題がありますか? – Remy

+0

JS(またはjQuery)を必要とせずにツールチップを追加できると確信しています。 Cf。 http://bramvanroy.be/リンクの1つにカーソルを移動します。これは、css(3)だけで行われます。これはあなたが得ている困難な時代のいくつかを解決するかもしれませんし、実装するのは簡単です。 –

+0

@Remyと同様、おそらくセレクタに問題があります。あなたのCSSでは '.tooltip'を使用しますが、JSでは' .ui_day'を使用します... – Alex

答えて

1

私はjQueryのツールに精通していないですが、あなたのz-indexが動作しない場合は、!importantタグを必要とするか、jQueryのツールでそれをposition:relativeまたはposition:absolute

+0

クレイジー、それは動作するようです。どうもありがとう! – yoshi

+0

どちらが働いたのですか? '!imporant'だと思います。 –

0

を作る必要がありますが、あなたが内部z-indexを指定する必要がツールチップツールヒントコンストラクタは次のようになります。

$( "。toolTipMe")ツールヒント({z-index: '9001'});それはz-indexzindexであれば

が、私はわからないんだけど...それをチェックアウト

関連する問題