Пользовательское значение атрибута получает изменения через jquery, но изменение не отображается в rendered html

Question

Я использую balloon.css для всплывающей подсказки.

Текст всплывающей подсказки по элементу происходит из пользовательского атрибута '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. В этом диалоговом окне есть кнопка возврата, которая скрывает значок и показывает некоторые переключатели. И когда вы выбираете любую радиокнопку, значок появляется снова, радиокнопка исчезает. И на этот раз подсказка значка должна быть новой. Я использую код выше, но исходный текст отображается, когда я вижу, что значения атрибута были изменены, но не отображаются на подсказке значка.

Answer 1

Пожалуйста, смотрите приложенный сниппет.

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>