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>