6

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.

3 Answers 3

12

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

1
  • @rustyx Edited, thank you for heads-up. Pen was using latest vuetify version, and a lot changed in vuetify v2 so pen broke.
    – Traxo
    May 25, 2020 at 19:04
6

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>
5

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/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/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/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script>
  new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data: {
      url: 'https://stackoverflow.com/'
    }
  })
</script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.