Jquery UI tooltip - multiple tooltips

Question

I'm using jquery UI for my tooltips. I would like to have more than one on the same page and have them open and close on click. I found a solution for having them open on click: http://jsfiddle.net/rjGeS/83/ (taken from this link -> jQueryUI tooltip Widget to show tooltip on Click)

What I need help with is having multiple tooltips on one page.

I tried altering the code slightly to make it work, but its just opening them all

$('#tooltip_1').click(function() {
var $this = $(this);

$(".tooltip").html(function() {
    $('.ttip').css({
        left: $this.position() + '20px',
        top: $this.position() + '50px'
    }).show()

}).fadeIn();

});

$('#tooltip_2').click(function() {
var $this = $(this);

$(".tooltip").html(function() {
    $('.ttip').css({
        left: $this.position() + '20px',
        top: $this.position() + '50px'
    }).show()

}).fadeIn();

});

blgt · Accepted Answer · 2014-05-29T11:29:04.047

The example code you've posted actually has nothing to do with jQueryUI Tooltips, I'll give a clean example instead.

You can use the open() and close() functions to show and hide tooltips programmatically. If you also need to stop the default tooltip functionality (as in, showing them on mouseover events) the easy way to do that is to use the disabled option.

Since you didn't specify if this should be click-once-show-all or not, here's a fiddle doing it for all: http://jsfiddle.net/wuL9M/ and here's a fiddle doing it individually: http://jsfiddle.net/qnYRy/

Note this line:

    $(".tooltip").off("mouseleave focusout");

It disables the default closing behaviour while the tooltip is open.

If you want to partially preserve only some of the default tooltip functionality, you can use a custom flag (instead of the disabled option), or you can attach extra event handlers to tooltipopen and tooltipclose. It's all pretty well documented here.

ADD: You can use the content option to customise the tooltip with any (potentially non-static) data. eg: http://jsfiddle.net/qnYRy/1/ You can change it after initialisation with the option function:

$("#myTooltip").tooltip("option", "content", "My updated tooltip data");
$("#myTooltip").tooltip("option", "content", function() { return "My updated tooltip data"; });

For obvious reasons this would require you to set the content for each tooltip separately. Also note that it will ignore any html title attribute you may have.

Thanks so much for your answer. I didn't realize what I was using had nothing to do with jquery ui. The thing I really like about what I'm using is that it allows for custom content. I need to put a table within the tooltip to give more information on fees. Is there a way this can be done with your solution? — michelle, May 29 '14 at 11:09
@michelle Yes, you can use the `content` option to customise the tooltip, well, content. eg. http://jsfiddle.net/qnYRy/1/ I'll add that to the answer. — blgt, May 29 '14 at 11:24

Jquery UI tooltip - multiple tooltips

1 Answers1