Vuetify: show tooltip with a condition

Question

I'm new to Vue.js and I hope with your help to understand scoped slots...

I would like to optimize my code, the tooltip must be visible on hover only if the label has more than 10 characters (or any other condition).

This works, but it is not optimized:

<v-btn>
 <v-tooltip right v-if="slot.label.length > 20">
  <template v-slot:activator="{on}">
   <span class="text-truncate ml-1 mr-1" v-on="on">
    {{slot.label}}
   </span>
  </template>
  <span>{{slot.label}}</span>
 </v-tooltip>
 <span v-else class="text-truncate ml-1 mr-1">
  {{slot.label}}
 </span>
</v-btn>

Answer 1

I think the easiest way to achieve the desired effect without duplication is to use the disabled prop of v-tooltip.

new Vue({
  el: '#app',

  data () {
    return {
      slot: {
        label: 'Label'
      }
    }
  }
})

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vuetify.css">
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.js"></script>
<div id="app">
  <v-app>
    <v-btn>
      <v-tooltip right :disabled="slot.label.length < 10">
        <template v-slot:activator="{on}">
          <span class="text-truncate ml-1 mr-1" v-on="on">
            Button: {{ slot.label }}
          </span>
        </template>
        <span>Tooltip: {{ slot.label }}</span>
      </v-tooltip>
    </v-btn>
    <v-btn @click="slot.label = 'Label'">Short</v-btn>
    <v-btn @click="slot.label = 'Label label'">Long</v-btn>
  </v-app>
</div>

The downside of this approach is that it still creates the tooltip even if it's disabled. The overhead isn't significant but if there are going to be a lot of tooltips then that might be a consideration.

There are various other ways to approach this but I can't think of any that are particularly simple. You could use a render function. That would allow you to write exactly what you want without any duplication but at the expense of needing to maintain a render function.

Answer 2

Sometimes you may want to show the tooltip when the underlying element is disabled. For eg: If a user has used all the resources in his account and then we need to ask the user to buy more resources. In such time insert an extra div and then add v-on onto to it.

<v-tooltip bottom :disabled="!noCandies">
   <template v-slot:activator="{ on, attrs }">
     <div v-on="on"> <!-- CREATE A DIV AND ADD V-ON HERE-->
       <v-btn :disabled="noCandies" small class="mt-1" @click="useCandy">
          Use candy
       </v-btn>
     </div>
   </template>
   <span>Buy more candies</span>
</v-tooltip>