CODEWITHSUNDEEP
vuetify.js
badigard
badigard

Reputation: 850

Wrapping v-icon with v-tooltip inside text-field?

I need help with creating a text-field, which has an icon inside with a tooltip attached to the icon. My code:

<v-text-field
                    v-model="url">
                  <span slot="label">Url
                   <v-tooltip bottom>
                      <v-icon
                        slot="activator"
                        color="primary"
                        dark
                      >home</v-icon>
                      <span>Tooltip</span>
                    </v-tooltip>
                   </span>
               </v-text-field>

Any ideas?

Thanks.

Upvotes: 6

Views: 26355

Answers (3)

Traxo
Traxo

Reputation: 19002

Since v1.1 we can use append (and prepend) slots for this:

<v-text-field v-model="url" label="URL">
    <v-tooltip slot="append" bottom>
        <v-icon slot="activator" color="primary" dark>home</v-icon>
        <span>Tooltip</span>
    </v-tooltip>
</v-text-field>

Codepen

Upvotes: 12

Ozeranskiy S.
Ozeranskiy S.

Reputation: 71

displaying tooltip when hovering over the icon inside v-text-field

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <v-content>
      <v-container>
        <v-text-field v-model="url" label="URL">
          <v-tooltip slot="append">
            <template v-slot:activator="{ on }">
                <v-icon v-on="on" color="primary" dark>
                  mdi-home
                </v-icon>
              </template>
            <span>Tooltip</span>
          </v-tooltip>
        </v-text-field>
      </v-container>
    </v-content>
  </v-app>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
<script>
  new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data: {
      url: 'https://stackoverflow.com/'
    }
  })
</script>

Upvotes: 6

Adarsh Madrecha
Adarsh Madrecha

Reputation: 7896

In vuetify version 2.0.7 I am using below code. It works perfectly.

      <v-tooltip bottom>
        <template #activator="{ on }">
          <v-icon color="red" class="mr-1" v-on="on">fab fa-youtube</v-icon>
        </template>
        <span>Tooltip</span>
      </v-tooltip>

Upvotes: 6

Related Questions