[Vuejs]-V-tooltip only for append-icon

3๐Ÿ‘

โœ…

No way to solve this (By some API option) โ€“ The component renders the icon outside of the text-area (Open GitHub issue/feature if you want).

enter image description here

Anyway if you use a simple <v-icon> component it works fine.

Extra details here:
Wrapping v-icon with v-tooltip inside text-field?

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    url: 'https://stackoverflow.com/'
  }
})
<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 label="Hello world">
          <v-tooltip slot="append">
            <template v-slot:activator="{ on }">
                <v-icon v-on="on" color="primary" dark>
                  mdi-calendar
                </v-icon>
              </template>
            <span>My 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>
๐Ÿ‘คEzra Siton

Leave a comment