Réglage de l'info-bulle de texte d'un élément div dynamiquement

Je suis en train de mettre un texte d'info-bulle dans un récipient (div) et de manière dynamique à l'aide de jQuery pour chaque élément div (elem.Alias-Statut) que je suis juste en ajoutant à la liste ordonnée:

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

mais il ne fonctionne pas de toute évidence. Dans l'exécution, quand j'ai placez le pointeur de la souris sur chacun d'eux, pas d'info-bulle. Et... je ne sais pas comment faire. J'ai besoin de créer au sein de cette fonction dans le même temps, l'élément est créé.

Fonction ci-dessus est appelée à partir d'une autre fonction qui est de parcourir tous les éléments (éléments). Ensuite, cette fonction passe en paramètre elem à addNewElement fonction.

Des idées?

Je suis à l'aide de jquery-ui 1.10.3 et jquery 1.10.2

OriginalL'auteur user304602 | 2013-10-24

  1. 13

    Fonctionne pour moi:

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

    OriginalL'auteur RoyBS

  2. 1

    Selon l'API(http://api.jqueryui.com/tooltip/#option-content), le moyen de le faire dans votre situation serait d'initialiser l'info-bulle après l'ajout du conteneur.

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

    Bien sûr, vous pouvez également modifier le contenu de l'info-bulle après l'initialisation comme ceci:

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

    J'ai eu cette lutte récemment et a trouvé de nombreuses autres approches, y compris l'approche que vous avez essayé, ce qui dans ton cas ne fonctionne pas parce que l'info-bulle n'a pas encore été initialisé. Mais c'est la bonne méthode et a travaillé pour moi.

    OriginalL'auteur user2274784

  3. -1

    Ici est la code pour définir une info-bulle pour n'importe quel élément à l'aide de 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>

    OriginalL'auteur peter