javascript - 启用/禁用动态 Bootstrap 工具提示

Question

我想让工具提示适用于动态内容。但我也想根据屏幕尺寸启用/禁用。

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

到目前为止我有这个:

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

Answer 1

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

使用委托(delegate)的工具提示不能单独销毁，但必须通过 $('body').tooltip('destroy')/$('body').tooltip('在 4.x 中处理')

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

---

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