Прочтите это, только если вы назначаете всплывающие подсказки динамически
т.е. <div tooltip={{ obj.somePropertyThatMayChange }} ...></div>
У меня была проблема с динамическими всплывающими подсказками, которые не всегда обновлялись вместе с представлением. Например, я делал что-то вроде этого:
Это не работало постоянно
<div ng-repeat="person in people">
<span data-toggle="tooltip" data-placement="top" title="{{ person.tooltip }}">
{{ person.name }}
</span>
</div>
И активируя его так:
$timeout(function() {
$(document).tooltip({ selector: '[data-toggle="tooltip"]'});
}, 1500)
Однако, поскольку мой массив людей изменился, мои всплывающие подсказки не всегда обновлялись. Я пробовал все исправления в этой теме и другие, но безуспешно. Кажется, что сбой происходит только в 5% случаев, и повторить его было практически невозможно.
К сожалению, эти всплывающие подсказки критически важны для моего проекта, и отображение неправильной всплывающей подсказки может быть очень плохим.
В чем, казалось, была проблема
Bootstrap копировал значение title
свойства в новый атрибут data-original-title
и title
удалял свойство (иногда), когда я активировал toooltips. Однако, когда my title={{ person.tooltip }}
изменит, новое значение не всегда будет обновлено в свойстве data-original-title
. Я попытался деактивировать всплывающие подсказки и повторно активировать их, уничтожить, напрямую привязать к этому свойству ... все. Однако каждый из них либо не работал, либо создавал новые проблемы; такие , как title
и data-original-title
атрибуты , как удаляется и снимите переплете из моего объекта.
Что сработало
Возможно, это самый уродливый код, который я когда-либо использовал, но он решил эту небольшую, но существенную проблему для меня. Я запускаю этот код каждый раз, когда всплывающая подсказка обновляется новыми данными:
$timeout(function() {
$('[data-toggle="tooltip"]').each(function(index) {
if ($(this).attr("title").length > 0) {
$( this ).attr("data-original-title", $(this).attr("title"));
}
});
$timeout(function() {
$(document).tooltip({ selector: '[data-toggle="tooltip"]'});
}, 500);
}, 1500);
По сути, здесь происходит следующее:
- Подождите некоторое время (1500 мс) для завершения цикла дайджеста и
title
обновления s.
- Если есть
title
свойство, которое не пустое (т. data-original-title
Е. Оно было изменено), скопируйте его в свойство, чтобы оно было подобрано инструментами Bootstrap.
- Активировать всплывающие подсказки
Надеюсь, этот длинный ответ поможет кому-то, кто, возможно, боролся, как и я.