Значение пользовательского атрибута изменяется через jquery, но изменение не отображается в отображаемом HTML

Я использую ball.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, он не показывает новый текст, он по-прежнему показывает «Исходный текст».

Почему это так, и, пожалуйста, поправьте меня, где я ошибаюсь.

К вашему сведению: я столкнулся с аналогичной проблемой для атрибута title.

**Обновлять **

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