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?
Advertisement
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>