0

おはようございます。ページロード時に「隠された」ツールチップを初期化する

私の質問はブートストラップツールチップに関するものです。私は私のページ(5正確に)内のツールチップの束を持っています。

ツールチップはこのように(多かれ少なかれ)を見て:

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

私は古典的で(右後)ページの最上部にそれらを初期化します。

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

ほとんどのツールチップ問題なく初期化されますが、2は正しく動作しません。ページの一部は、ユーザーが入力した内容に応じてページが読み込まれて表示される際に隠されています。

例:

<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"> 

...

これらのツールチップが最初に正しく初期化取得されていません。私はちょうど上記のjavascriptをコピーし、ツールチップの直後にそれを配置するクイックフィックスとして、動作します。それ以外は、同じ正確なjsがページ内で3〜4回現れるので、DRYの原則を殺します。

隠されているかどうかにかかわらず、すべてのブートストラップツールチップを初期化するより良い方法はありますか?

感謝:)

答えて

1

ng-ifレンダリングされてからDOM要素を防ぐことができます。したがってdocument.readyでの初期化は、彼らが唯一の

ng-show代わりの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"> 

にあなたの例を変更した表示CSS-popertyを変更するよう代わりにあなたがng-show/ ng-hideを使用することができ、あなたのng-if偽要素

上で有効になりません役に立つと願っています。

+0

'ng-if'は、それらがDOMに添付されないようにします。その後、それらはレンダリングされません。 – svarog

関連する問題