将工具提示文本动态设置为div元素

Question

我试图动态地将工具提示文本设置为容器(div),并使用jQuery为每个div元素(elem.Alias-Status)添加到有序列表中:

 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"));       
 };

但它显然不起作用.在运行时,当我将鼠标悬停在每个鼠标上时,不会显示任何工具提示.而且......我不知道该怎么做.我需要在创建项目的同时在此函数中创建它.

从另一个迭代所有项(元素)的函数调用上面的函数.然后此函数作为参数elem传递给addNewElement函数.

有任何想法吗？

我使用的是jquery-ui 1.10.3和jquery 1.10.2

Answer 1

适合我:

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

Answer 2

根据 API（http://api.jqueryui.com/tooltip/#option-content），在您的情况下执行此操作的方法是在附加容器后初始化工具提示。

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

当然，您也可以在初始化后更改工具提示内容，如下所示：

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

我最近遇到了这种困难，发现了许多其他方法，包括您尝试过的方法，在您的情况下该方法不起作用，因为工具提示尚未初始化。但这是正确的方法并且对我有用。