CODEWITHSUNDEEP
vuetify.js
Aaron.Bidwell
Aaron.Bidwell

Reputation: 69

How can you use a v-text-field inside of a v-tooltip?

I want to have a v-text-field inside of a v-tooltip so when a user is shown a tooltip they can enter information inside of the tooltip, but no clicks or input seem to register for the elements inside of the tooltip

                <v-tooltip top :open-on-click="true" :open-on-hover="false">
                    <template v-slot:activator="{ on }">
                        <v-list-item-content v-on="on">
                            <v-list-item-title>Title</v-list-item-title>
                            <v-list-item-subtitle>Subtitle</v-list-item-subtitle>
                        </v-list-item-content>
                    </template>
                    <v-text-field></v-text-field>
                </v-tooltip>

Upvotes: 1

Views: 981

Answers (2)

PRAJIN PRAKASH
PRAJIN PRAKASH

Reputation: 1475

Actually tool-tips are used only for show some tips, so the all pointer events will be blocked by css pointer-events: none;, We need to override this style with our CSS. see my working example here

Template

  <v-tooltip v-model="show" top>
    <template v-slot:activator="{ on }">
      <v-btn icon v-on="on">
        <v-icon color="grey lighten-1">mdi-cart</v-icon>
      </v-btn>
    </template>
    <span>Programmatic tooltip</span>
    <v-text-field
      label="Regular"
    ></v-text-field>
  </v-tooltip>

CSS

.v-tooltip__content{
  pointer-events: all;
}

Upvotes: 1

Anees Hameed
Anees Hameed

Reputation: 6544

The v-tooltip shows a disabled item when you hover, and the addition of events to this item will not work. You can achieve a similar effect v-menu. 

<v-menu bottom right
  :close-on-content-click="false">
  <template v-slot:activator="{ on }">
    <v-list-item-content v-on="on">
      <v-list-item-title>Title</v-list-item-title>
      <v-list-item-subtitle>Subtitle</v-list-item-subtitle>
    </v-list-item-content>                            
  </template>
  <v-card class="pa-3">
    <v-text-field hide-details v-model="textVal" @change="update"></v-text-field>
  </v-card>
</v-menu>

methods: {
  update(){
    console.log(this.textVal)
  }
}

Upvotes: 0

Related Questions