Enable/Disable 动态 bootstrap 工具提示

Question

我想让工具提示适用于动态内容。但我也想 enable/disable 取决于屏幕尺寸。

我想要发生的事情：如果屏幕小于 768，我想禁用工具提示。如果屏幕大于 768，我希望启用它。

到目前为止我有这个：

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

Answer 1

请试试这个：

you must add jQuery in the head page.

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"); 
        }
      });

Answer 2

由于您使用的是工具提示委托，并且我们无法在媒体查询中更改元素属性，因此您需要在视口宽度更改时销毁/重新生成每个工具提示。

无法单独销毁使用委托的工具提示，但必须通过 4.x 中的 $('body').tooltip('destroy') / $('body').tooltip('dispose') 删除。

现在将您的 tooltip() 函数设置为 onresize 处理程序，当视口宽度低于可接受的范围时重置 selector。您可以 return 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/

注意：以上只适用于用户可以动态改变视口大小的环境。要在移动设备、桌面设备等设备上使用不同的工具提示规则，请在声明性标记/响应式设计中解决这个问题。

Enable/Disable 动态 bootstrap 工具提示

Enable/Disable dynamic bootstrap tooltip

javascript

jquery

twitter-bootstrap

tooltip

twitter-bootstrap-tooltip