Инструменты Jquery — несколько всплывающих подсказок, разные изображения

Я сделал несколько всплывающих подсказок с помощью инструментов 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;

}

Я подумал, что должен просто сделать такой же, как этот, но изменить «всплывающую подсказку» на «всплывающую подсказку2» и выбрать другое изображение в CSS, но это не работает. Кто-нибудь может помочь? К сожалению, форумы по инструментам JQuery, похоже, не работают, поэтому я не могу получить там никакой помощи.

Спасибо.


jquery tooltip jquery-tooltip
person anarki    schedule 12.03.2012    source источник
comment
Я не думаю, что это возможно с jqueryTools, потому что в руководстве нет опции, или я не нашел, где можно было бы указать необязательный фон только для всплывающей подсказки!   -  person mas-designs    schedule 12.03.2012

Ответы (1)


arrow_upward
2
arrow_downward

Вот как я это сделал, но, вероятно, это можно улучшить:

<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; 
}
person RadiantThunder    schedule 16.04.2012