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

Answer 1

Works for me:

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