multiple tooltips with different images on same page

Question

I've made some tooltips using JQuery Tools, which works fine but I want a second tooltip on the same page with a different image, and I don't know how. Here is my code:

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

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

I thought I should just be able to make one the same as this but change "tooltip" to "tooltip2" and select a different image in the CSS but this doesn't work. Can anyone help? Unfortunately the forums on JQuery Tools seem to be broken so I can't get any help there.

Thanks.

Does the tooltip plugin automatically assume the tooltip class? — Jay Blanchard, Nov 08 '12 at 16:42

score 0 · Answer 1 · answered Nov 08 '12 at 16:46

You can set contents of your tooltips with content option:

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

You can use either a constant string here, or a function. It's actually described well enough in that widget documentation page.

multiple tooltips with different images on same page

1 Answers1