Tooltip on a modal

Question

Can someone help me to resolve my issue , I have a modal who need a tool tip on the 'Open dialog' button ,

This is an example here from vuetify: https://codepen.io/czechsebastian/pen/mdyyWze?&editable=true&editors=101

I want display a text when i hover the button using the vuetify tooltip.

thanks a lot

<div id="app">
  <v-app id="inspire">
    <v-row justify="center">
      <v-dialog v-model="dialog" persistent max-width="290">
        <template v-slot:activator="{ on }">
          <v-btn color="primary" dark v-on="on">Open Dialog</v-btn>
        </template>
        <v-card>
          <v-card-title class="headline">Use Google's location service?</v-card-title>
          <v-card-text>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="green darken-1" text @click="dialog = false">Disagree</v-btn>
            <v-btn color="green darken-1" text @click="dialog = false">Agree</v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </v-row>
  </v-app>
</div>

There are three buttons: the main "Open Dialog" one and the two on the modal itself. Can you clarify (by editing the question) which button needs the hover listener? — Ishan Chatterjee
Does this answer your question? Can a ui component be an activator for two items? (Trying to use a v-tooltip with a v-dialog) — wildhart
Pretty sure it is the exact same problem. Here's a working codepen taken exactly from the answer in that other question. — wildhart

Luca Rossi Luca Rossi · Accepted Answer · 2019-12-04T13:17:49

You can move your button outside the modal component and change the activator.

<div id="app">
  <v-app id="inspire">
    <v-row justify="center">
      <v-tooltip bottom>
        <template v-slot:activator="{ on }">
          <v-btn color="primary" dark  v-on="on" @click="dialog = !dialog">Open Dialog</v-btn>
         </template>
        <span>Tooltip</span>
       </v-tooltip>
      <v-dialog v-model="dialog" persistent max-width="290">
        <v-card>
          <v-card-title class="headline">Use Google's location service?</v-card-title>
          <v-card-text>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="green darken-1" text @click="dialog = false">Disagree</v-btn>
            <v-btn color="green darken-1" text @click="dialog = false">Agree</v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </v-row>
  </v-app>
</div>

Tooltip on a modal

1 Answers