title: Setting tooltip text to a div element dynamically
body: <p>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:</p>
  
  <pre><code> function addNewElement(elem) {
  
       var li = $("&lt;li&gt;&lt;/li&gt;");
  
       li.prop("class", "ui-state-default");
       li.prop("id", elem.Alias);
       li.text(elem.Name);
  
       var newItem = '&lt;div id="' + elem.Alias + '-Status" class="elementStatus" tooltipText="' + elem.IP + '"&gt;&lt;div class="image"&gt;&lt;img id="' + elem.Alias + '-StatusImg" src="@Url.Content("~/images/ongoing.gif")"&gt;&lt;/div&gt;&lt;div id="' + elem.Alias + '-StatusTxt" class="text"&gt;Waiting...&lt;/div&gt;&lt;/div&gt;';
       //$('#' + elem.Alias + '-Status').prop('tooltipText', elem. IP);
  
       li.append(newItem);
  
       li.appendTo($("#OuterDivContainer"));       
   };
  </code></pre>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>Any ideas?</p>
  
  <p>I am using jquery-ui 1.10.3 and jquery 1.10.2</p>