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 に答える