Lea esto solo si está asignando información sobre herramientas de forma dinámica
es decir <div tooltip={{ obj.somePropertyThatMayChange }} ...></div>
Tuve un problema con la información sobre herramientas dinámica que no siempre se actualizaba con la vista. Por ejemplo, estaba haciendo algo como esto:
Esto no funcionó de manera consistente
<div ng-repeat="person in people">
<span data-toggle="tooltip" data-placement="top" title="{{ person.tooltip }}">
{{ person.name }}
</span>
</div>
Y activándolo como tal:
$timeout(function() {
$(document).tooltip({ selector: '[data-toggle="tooltip"]'});
}, 1500)
Sin embargo, como mi matriz de personas cambiaría, mi información sobre herramientas no siempre se actualizaría. Probé todas las correcciones en este hilo y otros sin suerte. La falla parecía estar ocurriendo solo alrededor del 5% del tiempo y era casi imposible de repetir.
Desafortunadamente, esta información sobre herramientas es fundamental para la misión de mi proyecto y mostrar una información sobre herramientas incorrecta podría ser muy mala.
Cuál parecía ser el problema
Bootstrap estaba copiando el valor de la title
propiedad en un nuevo atributo data-original-title
y eliminando la title
propiedad (a veces) cuando activaba las sugerencias. Sin embargo, cuando mi title={{ person.tooltip }}
cambiara, el nuevo valor no siempre se actualizaría en la propiedad data-original-title
. Intenté desactivar la información sobre herramientas y reactivarlas, destruirlas, vincularlas directamente a esta propiedad ... todo. Sin embargo, cada uno de estos no funcionó o creó nuevos problemas; como que los atributos title
y data-original-title
se eliminan y se liberan de mi objeto.
Que funciono
Quizás el código más feo que jamás haya introducido, pero resolvió este pequeño pero sustancial problema para mí. Ejecuto este código cada vez que la información sobre herramientas se actualiza con nuevos datos:
$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);
Lo que está sucediendo aquí en esencia es:
- Espere algún tiempo (1500 ms) hasta que se complete el ciclo de resumen y
title
se actualicen los correos electrónicos.
- Si hay una
title
propiedad que no está vacía (es decir, ha cambiado), data-original-title
cópiela en la propiedad para que las herramientas de Bootstrap la recojan.
- Reactivar la información sobre herramientas
Espero que esta larga respuesta ayude a alguien que haya estado luchando como yo.