Initialisieren "verdeckte" Tooltips beim Laden der Seite

Question

Grüße alle :)

Meine Frage bezieht sich auf die Bootstrap-Tooltips. Ich habe eine Reihe von Tooltips innerhalb meiner Seite (5 um genau zu sein).

Die Tooltips sehen (mehr oder weniger) wie folgt aus:

<span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="top" title="{{'calculation.ttSD' | translate}}"></span> 

ich sie ganz oben auf der Seite (rechts, nachdem die) mit dem klassischen initialisieren:

<script> 
$(document).ready(function(){ 
    $('[data-toggle="tooltip"]').tooltip(); 
}); 
</script> 

meisten Tooltips werden ohne Probleme initialisiert, jedoch funktionieren 2 nicht richtig. Es gibt einige Teile der Seite, die beim Laden und Anzeigen der Seite ausgeblendet sind, je nachdem, was der Benutzer eingegeben hat.

Beispiel:

<tr ng-if="condition == 'true'"> 
<label data-translate="the.text.to.put.in.the.label"/> 
<span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="top" tittle="someText"> 

...

Diese Tooltips sind nicht richtig am Anfang initialisiert zu werden. Als schnelle Lösung habe ich einfach das obige Javascript kopiert und direkt nach den Tooltips platziert, was funktioniert. Außer, dass das DRY-Prinzip abgetötet wird, da genau die gleiche js 3-4 mal innerhalb der Seite auftaucht.

Was ist ein besserer Weg (wenn es einen Weg überhaupt gibt), alle Bootstrap-Tooltips zu initialisieren, egal ob versteckt oder nicht?

Dank :)

Answer 1

ng-if verhindert DOM-Element aus gerendert wird. Daraus ergibt sich die Initialisierung in document.ready wird nicht wirksam auf Ihre ng-if falschen Elemente

Stattdessen können Sie ng-show/ ng-hide verwenden, da sie nur Anzeige CSS-poperty

modifiziert Ihrem Beispiel zu ng-show statt ng-if

<tr ng-show="condition == 'true'"> 
<label data-translate="the.text.to.put.in.the.label"/> 
<span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="top" tittle="someText"> 

ändert hoffe, es hilft