Leia isto apenas se estiver atribuindo dicas de ferramentas dinamicamente
ie <div tooltip={{ obj.somePropertyThatMayChange }} ...></div>
Tive um problema com dicas de ferramentas dinâmicas que nem sempre eram atualizadas com a visualização. Por exemplo, eu estava fazendo algo assim:
Isso não funcionou de forma consistente
<div ng-repeat="person in people">
<span data-toggle="tooltip" data-placement="top" title="{{ person.tooltip }}">
{{ person.name }}
</span>
</div>
E ativando-o assim:
$timeout(function() {
$(document).tooltip({ selector: '[data-toggle="tooltip"]'});
}, 1500)
No entanto, como minha matriz de pessoas mudaria, minhas dicas de ferramentas nem sempre eram atualizadas. Tentei todas as soluções neste tópico e em outros sem sorte. A falha parecia estar acontecendo apenas cerca de 5% das vezes e era quase impossível de repetir.
Infelizmente, essas dicas de ferramentas são essenciais para o meu projeto e mostrar uma dica de ferramenta incorreta pode ser muito ruim.
O que parecia ser o problema
O bootstrap estava copiando o valor da titlepropriedade para um novo atributo data-original-titlee removendo a titlepropriedade (às vezes) quando eu ativava as pontas de demais. No entanto, quando meu title={{ person.tooltip }}fosse alterado, o novo valor nem sempre seria atualizado na propriedade data-original-title. Tentei desativar as dicas e reativá-las, destruindo-as, vinculando a essa propriedade diretamente ... tudo. No entanto, cada um deles não funcionou ou criou novos problemas; como os atributos titlee data-original-titlesendo removidos e não vinculados do meu objeto.
O que funcionou
Talvez o código mais feio que já empurrei, mas resolveu esse problema pequeno, mas substancial para mim. Eu executo este código sempre que a dica de ferramenta é atualizada com novos dados:
$timeout(function() {
$('[data-toggle="tooltip"]').each(function(index) {
// sometimes the title is blank for no apparent reason. don't override in these cases.
if ($(this).attr("title").length > 0) {
$( this ).attr("data-original-title", $(this).attr("title"));
}
});
$timeout(function() {
// finally, activate the tooltips
$(document).tooltip({ selector: '[data-toggle="tooltip"]'});
}, 500);
}, 1500);
O que está acontecendo aqui em essência é:
- Aguarde algum tempo (1500 ms) para que o ciclo de resumo seja concluído e os
titles sejam atualizados.
- Se houver uma
titlepropriedade que não está vazia (ou seja, foi alterada), copie-a para a data-original-titlepropriedade para que seja selecionada pelas dicas de ferramentas do Bootstrap.
- Reative as dicas de ferramentas
Espero que esta longa resposta ajude alguém que pode estar passando por dificuldades como eu.