如何在Vue.js中为移动设备隐藏Bootstrap自定义tooltip指令？

方案1：修改自定义指令（推荐） #

直接在指令初始化阶段判断设备类型，移动端完全不初始化Bootstrap tooltip，从根源避免显示问题，无需修改现有业务代码。

// 定义移动端判断规则
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)

window.Vue.directive("tooltip", function(el, binding) {
  // 移动端直接跳过tooltip初始化
  if (isMobile) return

  window.$(el).tooltip({
    title: binding.value,
    placement: binding.arg ? binding.arg : "right",
    trigger: "hover",
    html: true
  });
});

方案2：CSS媒体查询隐藏（无需修改JS） #

之前媒体查询失效是因为Bootstrap的tooltip默认是动态插入到<body>根节点下，而非绑定v-tooltip的元素的子节点，直接全局匹配tooltip类即可生效：

@media (max-width: 768px) {
  .tooltip {
    display: none !important;
  }
}

加!important是为了覆盖Bootstrap自带的动态显示样式。 #

可选优化：支持部分tooltip移动端可见 #

如果存在部分场景需要在移动端显示tooltip，可以给指令增加修饰符判断，灵活控制显示规则：

const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)

window.Vue.directive("tooltip", function(el, binding) {
  // 只有非移动端、或加了mobile修饰符的移动端场景才初始化tooltip
  if (isMobile && !binding.modifiers.mobile) return

  window.$(el).tooltip({
    title: binding.value,
    placement: binding.arg ? binding.arg : "right",
    trigger: "hover",
    html: true
  });
});

需要移动端显示的场景调用方式改为：

<div v-tooltip.mobile="messages.type_button" class="form-group row border-bottom p-2">

内容的提问来源于stack exchange，提问作者Dinesh Suthar