How to use v-tooltip with v-file-input tag in Vuet…

I want to use v-tooltip, when I input the file through v-file-input and mouse over the file name, file name will be showed popup like as v-tool-tip. So I tried to make code the following.

<template>
  <v-row>
    <v-col cols="4">file_Add_Sample_Code</v-col>
    <v-col cols="6" class="pl-0 py-2">
      <v-tooltip bottom v-model="showTooltip">
        <template v-slot:activator="{ on, attrs }">
          <v-file-input
            accept="application/zip"
            v-model="fileName"
            @change="getFileObject"
            truncate-length="22"
            style="flex-direction: row-reverse"
            v-bind="attrs"
            v-on="on"
            @mouseover="showTooltip = !showTooltip"
          >
          </v-file-input>
        </template>
        <span>{{ fileName }}</span>
      </v-tooltip>
    </v-col>
    <v-col cols="2" class="pl-0"></v-col>
  </v-row>
</template>

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'
@Component({})
export default class extends Vue {
  showTooltip: boolean = false
  fileName: string = ''
  async getFileObject(file:File) {
    this.fileName = await file.name
  }
}
</script>

I ran this code and input file, file input was success and tooltip displayed but never disappear. So, I thought using event handler in JS lie @mouseover in my code is correct my issue, but it seems not work. My goal is when I mouseover on file-input tag, and then tooltip display like Vuetify’s tooltip sample Does anyone advise me?

Answer

From your code:

<v-file-input
  ...
  v-on="on"
  @mouseover="showTooltip = !showTooltip"
  >
</v-file-input>

The reason for v-on="on" will work only when click but not hovering because of v-file-input only emit focus and blur events but not mouseenter, mouseleave nor mouseover events.

And since v-file-input does not emit mouseover event, your showTooltip = !showTooltip code will not actually be executed.

You can solve this by using native modifier:

<v-file-input
  ...
  @mouseenter.native="on.mouseenter"
  @mouseleave.native="on.mouseleave"
  >
</v-file-input>

Example

How to use v-tooltip with v-file-input tag in Vuetify 2.0?

Advertisement

Answer