CODEWITHSUNDEEP
vue.jsv-tooltip
George X
George X

Reputation: 47

How to show v-tooltip only when button is disabled

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>

Upvotes: 1

Views: 1613

Answers (1)

Dejan Sandic
Dejan Sandic

Reputation: 451

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

Upvotes: 1

Related Questions