Can a ui component be an activator for two items? (Trying to use a v-tooltip with a v-dialog)

问题

I have a button that is the activator for a dialog in my template. But I also want to use a tooltiop with the button. (Said otherwise, when I hover over the button I'd like to see the v-tooltip and when I click the button I'd like to open the dialog.)

I've tried to use the "append" slot on the tooltip but no success. When I add the append slot, the button completely vanishes from the rendered page.

Is it even possible to use a v-tooltip with a v-dialog in veutify?

This is what I have that does not work.

<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
<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.17/vue.js"></script>

<v-app>
  <v-dialog v-model="showAddPopup" persistent max-width="600px">
    <v-tooltip slot="append" bottom>

      <v-btn slot="activator" absolute fab dark left color="primary" @click="showPopup=true">
        <v-icon dark>add</v-icon>
      </v-btn>

      <span>Tooltip</span>
    </v-tooltip>

    <app-add-new-evaluator-modal @closePopup="closePopup($event)" @submit="addNewEvaluator" />
  </v-dialog>
</v-app>

回答1:

The Vuetify docs explain how to do this, but you'll find it in the Menu Component: https://vuetifyjs.com/en/components/menus#menu-with-activator-and-tooltip

Here's a simple example which opens a dialog with a button that has a tooltip:

<v-dialog>
  <template #activator="{ on: dialog }">
    <v-tooltip>
      <template #activator="{ on: tooltip }">
        <v-btn v-on="{ ...tooltip, ...dialog }">Button</v-btn>
      </template>
      <span>Tooltip text</span>
    </v-tooltip>
  </template>
  <v-card>
    Dialog content
  </v-card>
</v-dialog>

回答2:

Thanks @Traxo. All I had to do was add the slot="activator"to both components for it to work.

来源：https://stackoverflow.com/questions/53699833/can-a-ui-component-be-an-activator-for-two-items-trying-to-use-a-v-tooltip-wit

标签

Vue.js

vuetify.js