Включить/отключить динамическую всплывающую подсказку начальной загрузки

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

Что я хочу сделать: если экран меньше 768, я хочу отключить всплывающую подсказку. Если экран больше 768, я хочу, чтобы он был включен.

Пока у меня это:

function tooltip(){
  if (window.innerWidth <= 768) {
    $('[data-toggle="tooltip"]').tooltip("disable");
  } else {
    $('body').tooltip({
      selector: '[data-toggle="tooltip"]'
    });
  }
}

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

Ответы (2)


arrow_upward
1
arrow_downward

Поскольку вы используете делегирование всплывающей подсказки и поскольку мы не можем изменять атрибуты элемента в медиа-запросах, вам необходимо уничтожить/восстановить каждую всплывающую подсказку при изменении ширины окна просмотра.

Всплывающие подсказки, использующие делегирование, не могут быть уничтожены по отдельности, но должны быть удалены $('body').tooltip('destroy') / $('body').tooltip('dispose') в версии 4.x.

Теперь настройте функцию tooltip() как обработчик onresize, который сбрасывает selector, когда ширина области просмотра ниже допустимого диапазона. Вместо пустого селектора вы можете вернуть trigger: 'manual' или даже лучше вообще не инициализировать всплывающие подсказки :

window.onresize = tooltip = function() {
  $('body').tooltip('destroy')
  $('body').tooltip({
   selector: window.innerWidth > 768  ? '[data-toggle="tooltip"]' : ''
  })
}
tooltip()

Демонстрация в iframe здесь -> http://jsfiddle.net/gpmcxaeL/2/

Примечание. Описанное выше следует использовать только в среде, где пользователь может динамически изменять размер области просмотра. Чтобы иметь разные правила для всплывающих подсказок на мобильных устройствах, компьютерах и т. д., решите это в декларативной разметке/отзывчивом дизайне.

person davidkonrad    schedule 13.03.2019

arrow_upward
0
arrow_downward

Попробуйте следующее:

вы должны добавить jQuery на главную страницу.

if (window.innerWidth <= 768) {
        $('[data-toggle="tooltip"]').tooltip("disable");
      } else {
        $("[data-toggle='tooltip']").tooltip(); 
      }

    $(window).resize(function() {
        if (window.innerWidth <= 768) {
          $('[data-toggle="tooltip"]').tooltip("disable");
        } else {
          $("[data-toggle='tooltip']").tooltip("enable"); 
        }
      });
person user206    schedule 12.03.2019
comment
Спасибо за ответ! Но это не работает для динамически добавляемого контента - person Mandalina; 12.03.2019
comment
пожалуйста . Я проверил это. Работает. Но, пожалуйста, добавьте jQuery на главную страницу. Удачи. - person user206; 12.03.2019