Setting tooltip text to a div element dynamically

问题

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

回答1:

Works for me:

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

回答2:

According the API(http://api.jqueryui.com/tooltip/#option-content), the way to do this in your situation would be to initialize the tooltip after appending the container.

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

Of course, you could also change the tooltip content after initialization like this:

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

I had this struggle recently and found many other approaches, including the approach you tried, which in your case does not work because the tooltip has not yet been initialized. But this is the correct method and worked for me.

回答3:

Here is the code to set a tooltip for any element using 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>

来源：https://stackoverflow.com/questions/19571791/setting-tooltip-text-to-a-div-element-dynamically

标签

jquery

jquery-ui

jquery-tooltip

jquery-ui-tooltip