Setting tooltip text to a div element dynamically

Question

I am trying to set a tooltip text to a container (div) dynamically and using jQuery for each div element (elem.Alias-Status) that I am just adding to the ordered list:

 function addNewElement(elem) {

     var li = $("<li></li>");

     li.prop("class", "ui-state-default");
     li.prop("id", elem.Alias);
     li.text(elem.Name);

     var newItem = '<div id="' + elem.Alias + '-Status" class="elementStatus" tooltipText="' + elem.IP + '"><div class="image"><img id="' + elem.Alias + '-StatusImg" src="@Url.Content("~/images/ongoing.gif")"></div><div id="' + elem.Alias + '-StatusTxt" class="text">Waiting...</div></div>';
     //$('#' + elem.Alias + '-Status').prop('tooltipText', elem. IP);

     li.append(newItem);

     li.appendTo($("#OuterDivContainer"));       
 };

but it is not working obviously. In runtime, when I hover the mouse on each of them, no tooltip is shown. And... I do not know how to do this. I need to create it within this function at the same time item is created.

Above function is called from another function that is iterating over all the items (elements). Then this function pass as parameter elem to addNewElement function.

Any ideas?

I am using jquery-ui 1.10.3 and jquery 1.10.2

Solution 1

Works for me:

$(yourElement).prop('title', 'yourText');

Solution 2

According the API(http://api.jqueryui.com/tooltip/#option-content), the way to do this in your situation would be to initialize the tooltip after appending the container.

$('#' + elem.Alias + '-Status').tooltip({ content: elem.IP });

Of course, you could also change the tooltip content after initialization like this:

$('#' + elem.Alias + '-Status').tooltip("option", "content", "New Content");

I had this struggle recently and found many other approaches, including the approach you tried, which in your case does not work because the tooltip has not yet been initialized. But this is the correct method and worked for me.