Show Tooltip icon next to textfield label using Vuetify

1
votes

I am using vuetify's component tooltip. But I am not sure how to implement it right next to the label.

This is how I have it right now. 

<v-tooltip right>
  <v-icon slot="activator" dark color="primary">info</v-icon>
  <span>Please enter the user information correctly.</span>
</v-tooltip>
<v-text-field label="Information" v-model="dummy.info"> </v-text-field>

Image 1

I want to tooltip icon right next to the Information Label. Please suggest me how can I achieve that.

Update 1

<v-text-field label="Information" v-model="dummy.info">
 <template v-slot:append>
  <v-icon slot="activator" dark color="primary">info</v-icon>
  <span>Please enter the user information correctly.</span>
 </template>
</v-text-field>

Image 2

Update 2

<v-text-field
  v-model="dummy.info"
  label='Information'
  append-icon="info"
  suffix="Please enter the user information correctly."
/>

Image 3

2
vue.jstooltipvuetify.js

2 Answers

1
votes

You can append things to a v-text-field using the append slot.

    <v-text-field label="Prepend" prepend-icon="mdi-map-marker" />

https://vuetifyjs.com/en/components/text-fields#api

<v-text-field>
  <template v-slot:append>
    <v-icon slot="activator" dark color="primary">info</v-icon>
    <span>Please enter the user information correctly.</span>
  </template>
</v-text-field>

For Vuetify 1.xx

<v-text-field
  v-model="dummy.info"
  label="Information"
  append-icon="info"
  suffix="Please enter the user information correctly."
/>

https://v1.vuetifyjs.com/en/components/text-fields#example-prefixes-and-suffixes https://v1.vuetifyjs.com/en/components/text-fields#example-icon

0
votes

This snippet should work for you...

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
})
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&ext=.css" rel="stylesheet" />
<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>
<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <v-text-field>
          <template v-slot:label>
            What about <strong>icon</strong> here? 
            <v-tooltip bottom>
              <template #activator="{ on, attrs }">
                <v-icon class="mb-2" small v-on="on" v-bind="attrs" style="vertical-align: middle">
                  mdi-information
                </v-icon>
              </template> And here is the information...
          </v-tooltip>
          </template>
        </v-text-field>
      </v-container>
    </v-main>
  </v-app>
</div>