CODEWITHSUNDEEP
vue.jsvuetify.js
Александр Рублев
Александр Рублев

Reputation: 677

v-tooltip only for append-icon

I continue to deal with Vuetify. Tell me how you can apply a tooltip only for append-icon in a v-text-field? Now tooltip does not work for icons at all! codepen

  <v-tooltip bottom>
    <template v-slot:activator="{ on }">
      <v-text-field
        label="Regular"
        v-on="on"
        append-icon="event"
        style="max-width: 200px"
      />
    </template>
    <span>Tooltip</span>
  </v-tooltip>

Upvotes: 0

Views: 2092

Answers (1)

Ezra Siton
Ezra Siton

Reputation: 7741

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/[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 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/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

Upvotes: 3

Related Questions