如何在移动设备的 vuejs 中隐藏引导指令工具提示？答案

【问题标题】：How to hide bootstrap directive tooltip in vuejs for mobile devices?如何在移动设备的 vuejs 中隐藏引导指令工具提示？
【发布时间】：2021-08-14 15:50:51
【问题描述】：

我正在开发 Vuejs + Laravel。

有一个工具提示指令使用引导程序的功能。

这里是：

window.Vue.directive("tooltip", function(el, binding) {
  // console.log(el, binding);

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

它的用法是这样的：

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

在哪里

message:{
type_button:'Hello World, this is tooltip'
}

因此，此工具提示在桌面上运行良好，但在移动设备中导致显示问题，因此我们需要在移动设备中完全隐藏此工具提示。

由于我没有找到它使用的任何包，所以猜测它是开发的自定义指令。

我们尝试使用媒体查询进行隐藏，但没有任何帮助。谁能有想法，我该怎么办？

【问题讨论】：

添加一个类工具提示（或其他东西），并用媒体查询隐藏它。展示您对媒体查询的尝试。

标签： javascript html css vue.js

【解决方案1】：

所以我终于找到了解决方案感谢Umezo's comment

这里是：

window.Vue.directive("tooltip", function(el, binding) {
  // console.log(el, binding);

    if (window.matchMedia("(min-width: 300px)").matches) {

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

【讨论】：