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

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 this (non-working code):

<v-tooltip bottom
  :activator="$refs.filterBtn"
>
  Filter displayed items
</v-tooltip>
<v-btn
  ref="filterBtn"
  icon
  @click="isFilter = !isFilter"
>
  <v-icon>fa-filter</v-icon>
</v-btn>

I also tried using prop activator without the v-bind:, same result

Idea: I want the button to be placed separately from tooltip in order to run unit tests. When testing, shallowMount strips anything inside <v-tooltip> so I can't test the button. The problem is I don't know how to make tooltip show up on hover (just like it does when wrapped), I do not want to trigger it with @click.

EDIT: here's codepen

vue.jsvuetify.js


Solution 1:[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
    }
  }
})
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>


<div id="app">
  <v-app>
    <v-card>
      <v-card-title>
        <v-hover v-model="buttonHovering">
          <v-btn large>
            Hello
          </v-btn>
        </v-hover>
        <v-spacer></v-spacer>
        <v-tooltip left v-model="showToolTip" :disabled="!buttonHovering">
          <span>Hi from over here!</span>
        </v-tooltip>
      </v-card-title>
    </v-card>
  </v-app>
</div>

Solution 2:[2]

  <v-app>
        <v-tooltip bottom>
            <template v-slot:activator="{ on }">
                <v-btn
                 v-on="on"
                >
                Your button
                </v-btn>
            </template>
            <span> Your hover message </span>
       </v-tooltip>
  </v-app>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 doÄŸukan
Solution 2 Gabriel

Related Questions