Using Vuetify tooltip (v-tooltip) component with an external activator (i.e. not wrapped)

Question

I understand how to use Vuetify\'s v-tooltip with the tooltip wrapping the component. However, I\'m not quite sure how to have the activator button outside.

e.g. I have

Answer 1

How about using the v-hover UI Component. Wrap it around your button. Bind a boolean variable to the v-hover using v-model, call it buttonHovering. Then bind a boolean variable to the v-tooltip using v-model, call it showToolTip. Then use a watcher to toggle showToolTip true and false based on the value of buttonHovering. Or you can make showToolTip a computed property that always returns the value of buttonHovering. Lastly, bind the disabled attribute of the v-tooltip to the !buttonHovering property to ensure that the tooltip only displays when hovering over the button and not the tooltip's activator.

new Vue({
  el: '#app',
  data () {       
    return {
      buttonHovering: false,
      showToolTip: false
    }
  },
  watch: {
    buttonHovering (newVal) {
      this.showToolTip = newVal
    }
  }
})

  
    
      
        
          
            Hello
          
        
        
        
          info
          Hi from over here!