0

JQuery Tools を使用していくつかのツールチップを作成しましたが、これは正常に機能しますが、同じページに別の画像を使用して 2 つ目のツールチップが必要で、方法がわかりません。これが私のコードです：

<span id="tip">
<img src="images/info20.png" title="(popup text)" />
</span></td>

$(function() {  
$("#tip img[title]").tooltip({position: "top right", offset:[0,-25]});
});

.tooltip {
display:none;
font-family: arial;
background: url(../images/purple.png);
font-size:11px;
height:70px;
width:160px;
padding:25px;
color:#fff;

}

これと同じものを作成できるはずだと思ったのですが、「tooltip」を「tooltip2」に変更し、CSS で別の画像を選択しましたが、これは機能しません。誰でも助けることができますか？残念ながら、JQuery ツールのフォーラムは壊れているようで、そこで助けを得ることができません。

ありがとう。

4

1 に答える 1

2

私が行った方法は次のとおりですが、おそらく改善される可能性があります。

<span id="tip" class="puprle">
<img src="images/info20.png" title="(popup text)" />
</span>

<span id="tip" class="green">
<img src="images/info21.png" title="(popup text 2)" />
</span>


$(function() {  
  $("#tip.purple img[title]").tooltip({
    position: "top right",
    offset:[0,-25],
    tipClass:'tooltipPurple'
  });
  $("#tip.green img[title]").tooltip({
    position: "top right",
    offset:[0,-25],
    tipClass:'tooltipGreen'
  });
});

.tooltipPurple {
    display:none;
    font-family: arial;
    background: url(../images/purple.png);
    font-size:11px;
    height:70px;
    width:160px;
    padding:25px;
    color:#fff; 
}

.tooltipGreen {
    display:none;
    font-family: arial;
    background: url(../images/green.png);
    font-size:11px;
    height:70px;
    width:160px;
    padding:25px;
    color:#fff; 
}
于 2012-04-16T12:00:00.880 に答える