Уничтожьте все подсказки Bootstrap в Div

У меня есть div $("#settings") с несколькими подсказками для начальной загрузки, прикрепленными к дочерним элементам.

Например,

<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'), чтобы избавиться от всех этих всплывающих подсказок нажатием кнопки, но это не работает, я предполагаю, потому что всплывающие подсказки на самом деле не находятся в настройках div, а внутри.

Однако я также пробовал $('#settings').find('*').tooltip('destroy'), и это тоже не сработало.

Это из-за того, как я их инициализирую?

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

Что такое быстрый и простой способ доступа ко всем подсказкам в div?

Ответы

Ответ 1

Вы инициализировали все элементы, у которых есть атрибут data-toggle="tooltip", используя контейнер элементов (тело) через делегирование (fiddle):

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

поэтому, чтобы отключить его, используя destroy, вам нужно сделать это на теле:

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

Если вы хотите сделать это без делегирования, вы можете инициализировать каждый из элементов (fiddle):

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

и уничтожить его:

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

Если вы все еще хотите инициализировать прокси-сервер делегирование и не запускать его с помощью отключить (fiddle):

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

Объяснение о различии между уничтожением и отключением, взятым из Jasny answer:

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

Это ответ, который я получил в Bootstraps github. Поскольку вы используете делегирование (т.е. selector), я считаю, что существует только один фактический экземпляр всплывающей подсказки (на теле). Таким образом, попытка уничтожения несуществующих экземпляров всплывающих подсказок на самих элементах триггера не влияет. Сравните версию без делегирования: http://jsfiddle.net/zsb9h3g5/1/

Ответ 2

Как и в случае с загрузкой версии 4 и в соответствии с документацией, вы должны использовать dispose, поскольку destroy больше не определен. Пример приведен ниже:

$('#element').tooltip('dispose')

Ответ 3

Выбранный ответ уничтожает всплывающие подсказки, чтобы они полностью исчезли, и их функциональность отключена.

Если вы просто хотите сразу избавиться от всех всплывающих подсказок при сохранении их функциональности, используйте $('.tooltip').remove();.

Ответ 4

Чтобы уничтожить всплывающие подсказки внутри #settings, сделайте следующее:

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