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

Question

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

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

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

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

Answer 1

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

Подсказки, которые используют делегирование, не могут быть уничтожены по отдельности, но должны быть удалены с помощью $('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/

---

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

Answer 2

Пожалуйста, попробуйте это:

Вы должны добавить 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"); 
        }
      });