DOMから要素が削除されたときにブートストラップのツールチップを削除する方法

Question

現在ReactJSのプロジェクトを行っています。私のコンポーネントの中には、常にレンダリングされないものもあれば、特定の条件に基づいて動的に変化するものもあります。これらのコンポーネントにツールヒントが添付されている場合、その要素が非表示になっているときにツールヒントがアクティブだった場合、ツールヒントが消えないことに気づいています。私は、要素がレンダリングされていないときにこのツールチップを削除するか、少なくとも隠す方法を探しています。

これは私がjQueryのを使用してツールチップを活性化しています方法です：

$(document).ready(function() { 
     $("body").tooltip({ selector: '[data-toggle=tooltip]', placement: 'bottom' }) 
    }) 

これは私がHTML（またはJSX）以内にそれを使用している方法です：私は持っていない

<a className="icon-btn" onClick={() => { 
//on Click I remove this parent element and show something else 
}}> 
<i className="fa fa-lg fa-pencil-square" title="Edit" data-toggle="tooltip"></i> 
</a> 

注意ツールチップですべての要素を選択できるようになりました：

明らかに、要素のダイナミックを追加するためですically？少なくとも、それは私が同様の問題を抱えていたと私は質問がすでに少し古いですが、私は私の解決策を投稿し、多分それは将来的に誰かを助けることを知っている

Answer 1

$('.tooltip').tooltip('hide');

Answer 2

を示し、これまでどのような私の研究です。 ..（これは、アンギュラ活字体-jQueryの混合物だが、原理は同じである。）成分で

：鑑み

/* Toggles the Bootstrap 4 tooltip of an HTML element. */ 
private tooltip(elem: HTMLElement, action: string): void { 
    (<any>$(elem)).tooltip("dispose"); 
    (<any>$(elem)).tooltip({ container: "body" }); 
    (<any>$(elem)).tooltip(action); 
    (<any>$(elem)).tooltip("update"); 
} 

：

<someElement data-toggle="tooltip" title="..." 
    (mouseenter)="tooltip($event.target,'show')" 
    (mouseleave)="tooltip($event.target,'hide')"> 
</someElement> 

基本的に、グローバルな$('[data-toggle=tooltip]').tooltip()を一度にすべてのツールチップをアクティブにするのではなく、このコードが呼び出されたときにツールチップを使用していないと、たとえば、JSフレームワークの場合、カーソルが入ったときに要素にツールチップを添付し、要素が出ると直ちに破棄します。

（{ container: "body" }と"update"オプションは、より複雑なレイアウトのためのpositioning issues like thisを防ぐためにのみです。）