2016-06-30 17 views
0

ツールチップにballoon.cssを使用しています。jqueryによってカスタム属性値が変更されますが、レンダリングされたhtmlに変更が表示されません

要素のツールチップのテキストは、カスタム属性 'data-balloon'に由来します。

動的にツールチップのテキストを読み込みたいとします。

jqueryで変更することはできますが、新しいテキストは表示されたhtmlに表示されません。

HTMLコードの下に言及:

<div id="instruction_div_main" data-balloon="Original text"></div> 

のjQueryコードの下に言及:

alert($("#instruction_div_main").attr("data-balloon")); 
// alert shows "Original text" 

$("#instruction_div_main").attr("data-balloon","New Text"); 

alert($("#instruction_div_main").attr("data-balloon")); 
// alert shows "New text" 

しかし、私はそのdiv要素の上に置くと、今、それはしませんがここで

は私のコードです新しいテキストを表示、それでも "元のテキスト"を表示

私はどこにいるのですか? 違う。

FYI:title属性にも同様の問題があります。

**更新**

私はjqueryのUIダイアログに表示されるいくつかのアイコンの上にそのツールチップを表示しています。そのダイアログにはアイコンを隠し、いくつかのラジオボタンを表示する戻るボタンがあります。ラジオボタンを選択すると、アイコンが再び表示され、ラジオボタンが消えます。そして今度はアイコンのツールチップは新しいアイコンになるはずです。上記のコードを使用していますが、元のテキストが表示され、属性値は変更されていますが、アイコンのツールチップには表示されません。

enter image description here

+0

alert($("#instruction_div_main").attr("data-balloon")); // alert shows "Original text" $("#instruction_div_main").attr("data-balloon","New Text"); $("#instruction_div_main").html("New Text"); $("#instruction_div_main").attr("title","New Text"); alert($("#instruction_div_main").attr("data-balloon")); // alert shows "New text"
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="instruction_div_main" title="Original text" data-balloon="Original text">Original text</div>

... –

+0

私はわからない方法が、FYI私はここでツールチッププラグインを使用していません。 – Anjum

+0

私はそれを試しました...そして私の側では、それは«新しいテキスト»を示しています。 –

答えて

-1

見添付スニペットを持ってください。あなたは、属性を変更した後、ツールヒントを再初期化する必要が

関連する問題