web-dev-qa-db-ja.com

すべてを破棄Bootstrap Divのツールチップ

複数のbootstrap=子要素にツールチップが添付された$("#settings") divがあります。

例えば、

_<div id="settings" style="display: flex;">
  <tbody>
    <tr>
      <td width="25%" class="left Special" style="font-size:150%">Content:</td>
      <td width="5%"></td>
      <td width="70%" class="Special settingswrong" style="font-size:200%"><div style="display:inline" data-toggle="tooltip" data-placement="right" title="" data-original-title="This is not what you are looking for!">Content</div></td>
    </tr>
    <tr>
      <td width="25%" class="left Special" style="font-size:150%">Content:</td>
      <td width="5%"></td>
      <td width="70%" class="Special settingswrong" style="font-size:200%"><div style="display:inline" data-toggle="tooltip" data-placement="right" title="" data-original-title="This is not what you are looking for!">Content</div></td>
    </tr>
  </tbody>
</div>
_

ボタンを押すとこれらのすべてのツールチップを取り除くために$("#settings").tooltip('destroy')を実行したいのですが、機能しません。ツールチップが実際にオンではないため、 settings div、ただしその内部。

しかし、$('#settings').find('*').tooltip('destroy')も試してみましたが、それもうまくいきませんでした。

初期化の方法が原因ですか？

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

Div内のすべてのツールチップにアクセスするための高速で簡単な方法は何ですか？

javascriptjquerytwitter-bootstraptwitter-bootstrap-tooltip
20
LSD

要素コンテナ（本体）を使用して、data-toggle="tooltip"属性を持つすべての要素を初期化しました。トラフdelegation（ fiddle ）：

$("body").tooltip({ selector: '[data-toggle=tooltip]' });

destroyを使用して無効にするには、ボディで行う必要があります。

$('body').tooltip('dispose');

委任せずにしたい場合、各要素（ fiddle ）を初期化できます。

 $('[data-toggle="tooltip"]').tooltip();

そしてそれを破壊する：

$('[data-toggle="tooltip"]').tooltip('dispose'); // used in v4
$('[data-toggle="tooltip"]').tooltip('destroy'); // used in v3 and older

それでもdelegationを初期化し、disable（ fiddle ）を使用して動作を停止したい場合：

$('body').tooltip({ selector: '[data-toggle=tooltip]' });
$('body [data-toggle="tooltip"]').tooltip('disable');

Jasny's answer から取得したdestroyとdisableの違いについての説明：

$('[rel=tooltip]').tooltip()          // Init tooltips
$('[rel=tooltip]').tooltip('disable') // Disable tooltips
$('[rel=tooltip]').tooltip('enable')  // (Re-)enable tooltips
$('[rel=tooltip]').tooltip('dispose') // Hide and destroy tooltips

これはBootstraps githubで得た答えです-あなたは委任（つまりセレクタオプション）を使用しているので、実際には1つしかないと思いますツールチップインスタンス（本体上）。したがって、トリガー要素自体に存在しないツールチップインスタンスを破棄しようとしても効果はありません。委任されていないバージョンを比較します： http://jsfiddle.net/zsb9h3g5/1/

38
Technotronic

選択した回答はツールチップを破壊するため、ツールチップは完全に削除され、機能は無効になります。

機能を維持しながら、すべてのツールチップを一度に削除するだけの場合は、$('.tooltip').remove();を使用します。

8
kjdion84

bootstrap= version 4以降、ドキュメントによると、destroyが定義されなくなったため、 dispose を使用する必要があります。以下に例を示します。

$('#element').tooltip('dispose')
8
Muhammad Soliman

Bootstrap 3に<select>のツールチップがあり、$('body').tooltip('destroy')が$('[data-toggle="tooltip"]').tooltip({container:'body'})を介して初期化されたツールチップで動作しない状況がありました。

onchange="$('.tooltip').remove()"を使用してすべてのツールチップを削除しました。このメソッドは、BSメソッドが機能しない場所で機能します。それが同様の状況で誰かを助けることを願っていますか????

ノート

_opacity:0_ <select>は、従来のBSドロップダウンの代わりにOSドロップダウンを利用するためにBSボタンの上に配置されました。ボタンはオーバーレイのためにホバーを受信しないため、ツールチップが非表示の<select>に追加されました

また、onchangeイベントにthis.blur()を追加しました。それ以外の場合、<select>はフォーカスを維持し、ツールチップが繰り返しホバーで起動しないようにしますか????

0
Mavelo

#settings内のツールチップのみを破棄するには、次のようにします。

$('#settings [data-toggle="tooltip"]').tooltip('destroy');
0
isherwood