jQuery Forum

1. 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 title="' + elem.IP + '" id="' + elem.Alias + '-Status" class="elementStatus"><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').tooltip(); // toolitp
        li.append(newItem);
        li.appendTo($("#Container"));
    }

Initialy I set the tooltip as shown in the above code by using the title attribute.This is done for each elem passed as parameter.Above code is executed when page is loaded. elem passed as parameter comes from a request to a database. Above function is called from below one:

1. function ReadDataItems(task) {         
        ajax({
               url: task,
               type: 'POST',
               dataType: 'json',
               contentType: "application/json; charset=utf-8"
        }).then(function (data) {
                    $(data).map(function (i, item) {
                        addNewElement(item);                         
                    })
        });
    };

When I move the mouse over each: elem.Alias + '-Status' outer div, the tooltip text is not displayed.