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

回答1:

Try this:

<v-tooltip bottom
  v-model="filterBtnTTip"
>
  Filter displayed items
</v-tooltip>

<v-btn
  icon
  @click="isFilter = !isFilter"
  @mouseover="filterBtnTTip = true"
  @mouseleave="filterBtnTTip = false"
>
  <v-icon>fa-filter</v-icon>
</v-btn>

...
data () {
  return {
    ...
    filterBtnTTip: false
  }
}

回答2:

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/vuetify@1.5.16/dist/vuetify.js"></script>


<div id="app">
  <v-app>
    <v-card>
      <v-card-title>
        <v-hover v-model="buttonHovering">
          <v-btn slot-scope="{ hover }" large>
            Hello
          </v-btn>
        </v-hover>
        <v-spacer></v-spacer>
        <v-tooltip left v-model="showToolTip" :disabled="!buttonHovering">
          <v-icon slot="activator" color="blue lighten-1" large>info</v-icon>
          <span>Hi from over here!</span>
        </v-tooltip>
      </v-card-title>
    </v-card>
  </v-app>
</div>

来源：https://stackoverflow.com/questions/53769291/using-vuetify-tooltip-v-tooltip-component-with-an-external-activator-i-e-not

标签

Vue.js

vuetify.js