javascript - v-tooltip stops working when element is disabled - Stack Overflow

admin管理员组

文章数量:1188851

<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.

<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.

• javascript
• vue.js
• v-tooltip

Share Improve this question Follow edited Dec 12, 2018 at 18:00 Marc-André 32533 silver badges1717 bronze badges asked Dec 12, 2018 at 17:54 ThinkerThinker 14.5k99 gold badges4141 silver badges5656 bronze badges 1

• github.com/Akryum/v-tooltip/issues/125#issuecomment-419824775 – Derek Pollard Commented Dec 12, 2018 at 18:04

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 17

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>

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.

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.

本文标签： javascriptvtooltip stops working when element is disabledStack Overflow