7

我正在尝试将工具提示文本动态设置为容器（div），并为我刚刚添加到有序列表中的每个 div 元素（elem.Alias-Status）使用 jQuery：

 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

4

3 回答 3

17

为我工作：

$(yourElement).prop('title', 'yourText');
于 2015-01-25T16:13:28.293 回答
1

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

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

当然，您也可以像这样在初始化后更改工具提示内容：

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

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

于 2013-10-31T16:36:17.397 回答
0

这是使用 jQuery 为任何元素设置工具提示的代码。

<html>
<head>
<title>test</title>
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<button class="hide tip" data="hello">tip button</button>
<script language="javascript" type="text/javascript">
var xoff = 0; 
var yoff = 30; 
$(".tip").unbind().hover(function(e){
  this.top = (e.pageY + yoff);
  this.left = (e.pageX + xoff);
  var data = $(this).attr("data");
  if(typeof(data)!='undefined'){
    var tipcontainer = '<div class="hide" id="tipcontainer">'+data+'<div>';
    $('body').append(tipcontainer);
    $("#tipcontainer").css({"position":"absolute","top":this.top + "px","left":this.left + "px"}).fadeIn("fast");
  }
},function(){
   $("#tipcontainer").fadeOut("slow").remove();
}).mousemove(
  function (e) {
    this.top = (e.pageY + yoff);
    this.left = (e.pageX + xoff);
    $("#tipcontainer").css({"position":"absolute","top":this.top + "px","left":this.left + "px"});
  }
);        
</script>
</body>
</html>
于 2018-03-12T05:54:49.780 回答