Skip to content
Advertisement

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

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.

JavaScript

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:

JavaScript

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:

JavaScript

Example

User contributions licensed under: CC BY-SA
7 People found this is helpful
Advertisement