1

I am using Vuejs 2 and the v-tooltip npm package. I would like to display the v-tooltip only when a button is disabled. When it is not disabled, I don't want to display the v-tooltip at all.

<button
  v-tooltip="message"
  :disabled="true">
  CLICK ME!
</button>
George X
  • 47
  • 1
  • 7

1 Answers1

1

Let say you have a variable disabled in your state, it can be a condition as well a > b, then you can conditionally render the buttons.

<button
  v-if="disabled"
  v-tooltip="message"
  :disabled="true">
  CLICK ME!
</button>
<button
  v-else
>
  CLICK ME!
</button>

Or you can even try this

<button
  v-tooltip="disabled ? message : ''"
  :disabled="true">
  CLICK ME!
</button>

maybe it will work

Dejan Sandic
  • 451
  • 2
  • 10