Динамическая установка текста всплывающей подсказки для элемента div

Я пытаюсь динамически установить текст всплывающей подсказки в контейнер (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"));       
 };

но это не работает, очевидно. Во время выполнения, когда я навожу мышь на каждый из них, всплывающая подсказка не отображается. И... я не знаю, как это сделать. Мне нужно создать его в этой функции одновременно с созданием элемента.

Вышеуказанная функция вызывается из другой функции, которая выполняет итерацию по всем элементам (элементам). Затем эта функция передается как элемент параметра функции addNewElement.

Любые идеи?

Я использую jquery-ui 1.10.3 и jquery 1.10.2.


jquery jquery-ui jquery-ui-tooltip jquery-tooltip
person user304602    schedule 24.10.2013    source источник

Ответы (3)


arrow_upward
17
arrow_downward

Работает на меня:

$(yourElement).prop('title', 'yourText');
person RoyBS    schedule 25.01.2015

arrow_upward
1
arrow_downward

Согласно API(http://api.jqueryui.com/tooltip/#option-content), способ сделать это в вашей ситуации — инициализировать всплывающую подсказку после добавления контейнера.

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

Конечно, вы также можете изменить содержимое всплывающей подсказки после инициализации следующим образом:

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

Недавно у меня была эта борьба, и я нашел много других подходов, включая подход, который вы пробовали, который в вашем случае не работает, потому что всплывающая подсказка еще не инициализирована. Но это правильный метод, и он сработал для меня.

person user2274784    schedule 31.10.2013

arrow_upward
0
arrow_downward

Вот код для установки всплывающей подсказки для любого элемента с помощью 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>
person peter    schedule 12.03.2018