1

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?

User 28
  • 4,863
  • 1
  • 20
  • 35
drunkdolphin
  • 765
  • 1
  • 16
  • 46
  • Is there a reason you don't use the normal functionality of `v-file-input` to show the filename in the control? – Dan Jan 26 '21 at 08:13
  • Thank you for comments and sorry for late replying! In my latest project, I need to get file object to put it for RestAPI. So, I used "getFileObject" method in my code.Sorry for lack of the information. – drunkdolphin Jan 27 '21 at 00:50

1 Answers1

3

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

User 28
  • 4,863
  • 1
  • 20
  • 35
  • I clearly understood why my code didn't work. I need to add native modifier to use evet I used. I feel I need to learn about vue.js component. Thank you so much for your answer! It was so helpful for me! – drunkdolphin Jan 27 '21 at 00:40
  • I confirmed your Example conde in Jsfiddle and my development environment. I have one question for your code. Why method like "on.mouseenter" and "on.mouseleave" define as event handler's method, mouseenter and mouseleave event will work? – drunkdolphin Jan 27 '21 at 00:45
  • Sorry for wired question, but my first carrier start with Vue.js, So I lack of knowledge about DOM and HTML. If you have any time, could you advise me? – drunkdolphin Jan 27 '21 at 00:47
  • @drunkdolphin I found this [answer](https://stackoverflow.com/a/55194478/2438933) which well explained about activator. – User 28 Jan 27 '21 at 02:04
  • And see [v-on](https://vuejs.org/v2/api/#v-on). The syntax `v-on='someObject'` this is called object syntax which does not support any modifiers. So I use `@mouseenter.native="on.mouseenter"` to bind native event. – User 28 Jan 27 '21 at 02:07
  • Thanks a lot!! I really appreciate it!! – drunkdolphin Jan 27 '21 at 23:16