Using multiple JQuery UI tooltips on dynamic elements

Question

I'm using JQuery UI's tooltips for a page using dynamic elements. It works perfectly on a single element, however when I attempt to add multiple tooltips the last tooltip defined seems to overwrite the existing items.

e.g.

$("body").tooltip({
    selector: ".testItem1",
    items: ".testItem1",
    content: "1"
});

$("body").tooltip({
    selector: ".testItem2",
    items: ".testItem2",
    content: "2"
});

In this case the second tooltip seems to overwrite the first.

Example (only the second items tooltip will work): https://jsfiddle.net/wce547w7/

Is there an alternative way to add tooltips to dynamic elements? Or can I use a property of some type to allow additional tooltips?

Edit: The dynamic elements are added outside of my control, so I cannot add the tooltip at the same time as creating the element.

Artemiy StagnantIce Alexeew · Accepted Answer · 2015-10-12 10:55:19Z

1

Why use many tooltips?

// Add elements
var count = 0;
$(".addItem").on("click", function(){
    count++;
    $("body").append('<div class="testItem">Test ' + count + '</div>');
})

// Add tooltips
$("body").tooltip({
    selector: ".testItem",
    items: ".testItem",
    content: function() {return $(this).html();}

});

edited Oct 12, 2015 at 10:55

answered Oct 12, 2015 at 10:53

Artemiy StagnantIce Alexeew

8621 gold badge7 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

DBS Over a year ago

The example was just to show the effect, in the actual problem the tooltip isn't just the index of the element.

DBS Over a year ago

That's an interesting idea, I'll swap the html out for a data attribute and give it a try.

DBS Over a year ago

Works perfectly, I didn't even think about doing it that way. Thanks :)

Collectives™ on Stack Overflow

Using multiple JQuery UI tooltips on dynamic elements

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related