2012-04-17 16 views
0

私は、ガイダンスを提供するためにCSSのツールチップを使用していますが、これをjqgridに含めることを試みています。Css HoverのツールチップがJqGridで機能しない

ただし、列のタイトルはホバーに表示されます。 <span>はありません。 title:falseを追加しようとしましたが、何も起こりません。

はここで私が使用しているCSSです:

.tooltip { border-bottom:1px dotted #000000; outline:none; text-decoration:none; cursor:help; } 
.tooltip:hover em { padding: .2em 0 .6em 0; font-weight:bold; display:block; } 
.tooltip { position:relative; } 
.tooltip:hover span { position:absolute; left:1em; top:-4.5em; z-index:99; margin-left:0; width:150px; } 
.tooltip:hover em { border:0; margin: -10px 0 0 -55px; float:left; position:absolute; } 
.tooltip span { margin-left:-999em; position:absolute; } 

そして、ここでそれが適用されています方法は次のとおりです。

<a class='tooltip' href='#'> 
<img alt='Help' src='/Images/question_mark_sm.png' /> 
<span class='tooltip_classic info'>Guidance Tag</span> 
</a> 

それはどこにもなく、jqGridで動作する理由はわかりません。私は試してみましたが、うまくいかないようです。 (画像が表示され、カーソルは変わりますがポップアップは表示されません)

+0

あなたはjqGridで 'tooltip'クラスを使用する方法を示している含まれており、コードはありません。カスタムフォーマッタを使用していますか? 'z-index'(' .tooltip:hover span'のCSSで)の値を1000より大きな値に増やそうとしましたか? – Oleg

+0

これについては、おそらくコンテキストが必要です。ツールチップを非表示にするjqGridに関連した、おそらく他の位置指定または文脈上のCSSがあります。 –

+0

@Oleg、はい、私は 'z-index'を9999まで上げました。何もしませんでした。私はjqGrid列でカスタムフォーマッタを使用していません。上に掲載したhtmlコードを列項目の1つとして送信していますので、jqGridに表示されます。ツールチップはありません。 – Cody

答えて

1

jqGridセルからツールチップ属性を削除してみます。

IE7を除くすべてのブラウザでうまく動作します。私はjqGrigridCompleteイベントを使用しました。ここで

は例です:

// _YourColID is you column name from colModel 
$("td[aria-describedby*=_YourColID]", "#yourGridID tr").removeAttr("title"); 
$("td[aria-describedby*=_YourColID]", "#yourGridID tr").tooltip({ 

    // each trashcan image works as a trigger 
    tip: '.tooltip', 

    // custom positioning 
    position: 'center right',     

    // move tooltip a little bit to the right 
    offset: [0, -10],     

    // there is no delay when the mouse is moved away from the trigger 
    delay: 0,     
    predelay: 2000,     
    onShow: function(e){ 
    if ($(e.target).parent("tr").attr('id') != -1) { 
     yourTooltipFunction($(e.target).parent("tr").attr("id")); 
    } 
    } 
}).dynamic({ 
    bottom: { 
    direction: 'down', 
    bounce: true 
    } 
}); 
関連する問題