CODEWITHSUNDEEP
javascriptvue.jsbuttonvuetify.jsvisibility
xyz
xyz

Reputation: 119

In vuetify, how to display tooltip when button is disabled

I'm using button and tooltip component in my vuetify project. I want to display tooltip only when the button is disabled and I'm looking for a solution how can I do it correctly.

For now tooltip is visible only when the button is enabled.

My code:

<v-tooltip top>
<template v-slot:activator="{ on, attrs }">
<v-btn class="ma-2" color="primary" :disabled="disabled" v-bind="attrs" @click="clear" v-on="on">
Save
</v-btn>
 </template>
<span>its my toolip</span>
</v-tooltip>

Upvotes: 4

Views: 2725

Answers (2)

Undead
Undead

Reputation: 79

            <v-tooltip top>
              <template v-slot:activator="{ on, attrs }">
                <div v-on="disabled ? on : ''">
                  <v-btn class="ma-2" color="primary" :disabled="disabled" v-bind="attrs">
                    Save
                  </v-btn>
                </div>
              </template>
              <span>its my tooltip</span>
            </v-tooltip>

Or this, so you don't need two buttons. The only notable difference is line 3.

It's been awhile, but hope this helps. Let me know if this seems weird! :)

Upvotes: 3

michael
michael

Reputation: 4173

Not sure if there's better answer, but you can use v-if and v-else. Also, if you want to show tooltip for disabled button you should wrap button with empty div. Try below.

  <v-tooltip v-if="disabled" top>
    <template v-slot:activator="{ on, attrs }">
      <div v-on="on">
        <v-btn class="ma-2" color="primary" disabled v-bind="attrs" @click="clear">
          Save
        </v-btn>
      </div>
    </template>
    <span>its my toolip</span>
  </v-tooltip>
  <v-btn v-else class="ma-2" color="primary" v-bind="attrs" @click="clear">
    Save
  </v-btn>

Upvotes: 3

Related Questions