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

Question

我正在开发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'
}

因此，这个工具提示在桌面上非常有效，但它会导致移动设备中的显示问题，因此我们需要在移动设备中完全隐藏这个工具提示。

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

我们尝试使用媒体查询进行隐藏，但没有任何帮助。有人知道吗，我该怎么办？

Answer 1

所以我终于找到了解决方案感谢Umezo的评论

在这里：

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