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

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

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

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

Как быстро и легко получить доступ ко всем всплывающим подсказкам в div?


javascript jquery twitter-bootstrap twitter-bootstrap-tooltip
person LSD    schedule 29.01.2015    source источник

Ответы (5)


arrow_upward
52
arrow_downward

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

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

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

$('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

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

$('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('dispose') // Hide and destroy tooltips

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

person Technotronic    schedule 29.01.2015
comment
странно, что "уничтожить" не работает... так говорят их документы... спасибо! :) - person LSD; 29.01.2015

arrow_upward
12
arrow_downward

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

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

person kjdion84    schedule 15.07.2017

arrow_upward
9
arrow_downward

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

$('#element').tooltip('dispose')
person Muhammad Soliman    schedule 07.08.2017

arrow_upward
1
arrow_downward

У меня была ситуация в Bootstrap 3 с всплывающими подсказками на ‹select›, где $('body').tooltip('destroy') не работал на всплывающих подсказках, инициализированных через $('[data-toggle="tooltip"]').tooltip({container:'body'}).

В итоге использовал onchange="$('.tooltip').remove()" для удаления всех всплывающих подсказок. Этот метод работает там, где не работают методы BS. Надеюсь, это поможет кому-то с похожей ситуацией ????

Заметки

Мой opacity:0 ‹select› был помещен над кнопкой BS, чтобы использовать раскрывающиеся списки ОС вместо традиционного раскрывающегося списка BS. Кнопка не получает хов из-за оверлея, поэтому всплывающую подсказку добавили в невидимку ‹select›

Я также добавил this.blur() к событию onchange. В противном случае ‹select› удерживает фокус, предотвращая срабатывание всплывающей подсказки при повторяющихся наведениях ????

person Mavelo    schedule 28.09.2018
comment
На самом деле пришлось немного изменить его, так как onchange никогда не срабатывал, если была выбрана одна и та же ‹option›. Обновлено до onclick="$('.tooltip').remove();" onchange="this.blur()" - person Mavelo; 28.09.2018

arrow_upward
0
arrow_downward

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

$('#settings [data-toggle="tooltip"]').tooltip('destroy');
person isherwood    schedule 29.01.2015
comment
Пробовал использовать это (вместо моего решения), и всплывающая подсказка больше не срабатывала ???? Хотя моя ситуация, вероятно, уникальна ???? - person Mavelo; 28.09.2018