v-tooltip stops working when element is disabled

Question

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

I need the tooltip explaining why the button is disabled, but when I do, tooltip is disabled also.

Answer 1

From this issue on the project:

The point with this is, that it's actually not an issue related to v-tooltip, but a browser-specification. Depending on the browser you use, some might and some other might not emit events for disabled elements. In this case, Firefox seems to emit events for disabled buttons and chrome doesn't.

As a workaround you might wrap the button in a div to be able to use v-tooltip on it.

---

Example

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

Answer 2

I guess you could wrap the button in a span and put the tooltip in the span instead of the button ..

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

Where condition is some boolean data property. This will make the tooltip appear when the button is disabled and disable the tooltip when the button is enabled.

Answer 3

Try this:

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

div element default is display: block. The tooltip position will be error when the child doesn't suit with 100% width.