jquery工具 - 多个工具提示，不同的图像

Question

我做了一些工具提示使用JQuery工具，它工作正常，但我想在同一页上的另一个工具提示与不同的图像，我不知道如何。这里是我的代码：

<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; 

}

我想我应该能够使一个同为“tooltip2”，并选择在CSS中不同的图像而这一点，但变化“工具提示”此不起作用。谁能帮忙？不幸的是，JQuery Tools的论坛似乎被打破了，所以我在那里找不到任何帮助。

谢谢。

Answer 1

这里是我是如何做到的，但大概可以提高：

<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; 
}