CODEWITHSUNDEEP
javascriptjquerypopup-balloonsballoon-tip
Anjum
Anjum

Reputation: 681

Custom attribute value gets change through jquery but the change doesn't show up in rendered html

I am using balloon.css for tooltip.

The text of tooltip on element comes from custom attribute 'data-balloon'.

I want to load text of tooltip dynamically.

I can change it through jquery but new text doesn't get rendered on displayed html.

Here is my code :

HTML Code Mention Below: 

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

Jquery Code Mention Below: 

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"

But now when i hover on that div, It doesn't show new text, It still shows "Original text"

Why it is so and please correct me where i am wrong.

FYI : I am facing similar issue for title attribute.

**Update **

I am showing that tooltip on some icon that is displayed in jquery ui dialog. There is back button on that dialog that hide icon and show some radio buttons. And when select any radio button, icon gets shown up again, radio button disappears. And this time tooltip of icon should be new one. I am using above code but the original text is shows up where i can see that the attribute values has been changed but not getting rendered on icon tooltip.

enter image description here

Upvotes: 0

Views: 426

Answers (1)

DiniZx
DiniZx

Reputation: 126

Please have a look attached snippet.

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>

Upvotes: -1

Related Questions