Einstellung QuickInfo-text in ein div-element dynamisch

Ich bin versucht, einen tooltip-text auf einen container (div) dynamisch und unter Verwendung von jQuery für jedes div-element (elem.Alias-Status), dass ich nur das hinzufügen, um die geordnete Liste:

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

aber es ist nicht offensichtlich. In runtime, wenn ich mit der Maus auf jeden von Ihnen, wird keine QuickInfo angezeigt. Und... ich weiß nicht, wie Sie dies tun. Ich muss es schaffen innerhalb dieser Funktion zur gleichen Zeit-Element erstellt wird.

Oben genannten Funktion wird aufgerufen, um eine weitere Funktion, die Iteration über alle Elemente (Elemente). Dann dieser Funktion übergeben Sie als parameter elem zu addNewElement Funktion.

Irgendwelche Ideen?

Ich bin mit den jquery-ui-1.10.3 und jquery 1.10.2

InformationsquelleAutor user304602 | 2013-10-24

  1. 12

    Funktioniert bei mir:

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

    InformationsquelleAutor RoyBS

  2. 1

    Laut der API(http://api.jqueryui.com/tooltip/#option-content), die Art und Weise, dies zu tun in Ihrer situation, wäre die Initialisierung des tooltip, nachdem man die container.

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

    Natürlich können Sie auch ändern Sie den QuickInfo-Inhalt nach der Initialisierung wie diese:

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

    Ich hatte diesen Kampf vor kurzem und gefunden, dass viele andere Ansätze, einschließlich der Ansatz, Sie versucht, die in Ihrem Fall nicht funktionieren, weil der tooltip ist noch nicht initialisiert. Aber dies ist die richtige Methode und für mich gearbeitet.

    InformationsquelleAutor user2274784

  3. -1

    Hier ist die code, um eine QuickInfo für jedes element mit 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>

    InformationsquelleAutor peter

Schreibe einen Kommentar