javascript - 当元素被禁用时 v-tooltip 停止工作

Question

<button v-tooltip="'text'" :disabled=true>Some button</button>

我需要tooltip解释为什么按钮被禁用，但是当我这样做时，tooltip它也被禁用。

Answer 1

从这个问题上的项目：

重点是，这实际上不是与 v-tooltip 相关的问题，而是浏览器规范。根据您使用的浏览器，一些可能和另一些可能不会为禁用元素发出事件。在这种情况下，Firefox 似乎会为禁用的按钮发出事件，而 chrome 不会。

作为一种解决方法，您可以将按钮包装在 div 中，以便能够在其上使用 v-tooltip。

---

例子

<div v-tooltip="'text'"><button :disabled=true>Some button</button></div>

Answer 2

我想你可以将按钮包装在一个跨度中并将工具提示放在跨度而不是按钮..

<span v-tooltip="condition && 'text'">
  <button :disabled="condition">Some button</button>
</span>

condition一些布尔数据属性在哪里。这将在禁用按钮时显示工具提示，并在启用按钮时禁用工具提示。

Answer 3

试试这个：

<div
  style="display: inline-block"
  v-tooltip="'text'"
>
  <button disabled>button</button>
</div>

div 元素默认为display: block. 当孩子不适合 100% 宽度时，工具提示位置会出错。