How can I remove the "No file chosen" tooltip from a file input in Chrome?

Question

I would like to remove the "No file chosen" tooltip from a file input in Google Chrome (I see that no tooltip is displayed in Firefox).

Please notice that I'm talking not about the text inside the input field, but about the tooltip that appears when you move the mouse over the input.

I've tried this with no luck:

$('#myFileInput').attr('title', '');

Solution 1

This is a native part of the webkit browsers and you cannot remove it. You should think about a hacky solution like covering or hiding the file inputs.

A hacky solution:

input[type='file'] {
  opacity:0    
}

<div>
    <input type='file'/>
    <span id='val'></span>
    <span id='button'>Select File</span>
</div>   

$('#button').click(function(){
   $("input[type='file']").trigger('click');
})

$("input[type='file']").change(function(){
   $('#val').text(this.value.replace(/C:\\fakepath\\/i, ''))
})    

Fiddle

Solution 2

The default tooltip can be edited by using the title attribute

<input type='file' title="your text" />

But if you try to remove this tooltip

<input type='file' title=""/>

This won't work. Here is my little trick to work this, try title with a space. It will work.:)

<input type='file' title=" "/>

Solution 3

For me, I just wanted the text to be invisible and still use the native browser button.

input[type='file'] {
  color: transparent;
}

I like all of undefined's suggestions but I had a different use case, hope this helps someone in the same situation.

Solution 4

I found a solution that is very easy, just set an empty string into the title attribute.

<input type="file" value="" title=" " />

Solution 5

Very easy, forget CSS targeting the input["type"] thing, it doesn't work for me. I don't know why. I got my solution in my HTML tag

<input type="file" style="color:transparent; width:70px;"/>

End of the problem

View more solutions

Comments

[Dreen]

I was going to post this, plus that there is a JQuery plugin that does a sort of similar thing filamentgroup.com/lab/…

[German Latorre]

@RyanMcDonough, I can't see any tips about hiding the tooltip in the link you provided, is there anything I'm missing?

[Ryan McDonough]

Apologies, I should of clarified. As there is no way to hide that tooltip you will need to customise the input form control to achieve a similar result. In a sense hacking the original control.

[German Latorre]

@Dreen, I can see the "No file chosen" tooltip in the link you provided as well, it does not solve the problem...

[German Latorre]

Wow, that's bad news... Is there any documentation available that mentions this issue (I mean, te fact that you cannot remove that tooltip)?

[Ram]

@antur123 “No file chosen” like browser's back and forth button is not a part of the DOM, JavaScript has no access to them, for this reason I don't think there is a documentation about this issue.

[Arsen K.]

Tooltip is still displayed, when you hover over the bottom edge of the input. "Opacity: 0" doesn't solve the problem.

[Ram]

@Webars I have mentioned hacky, not bullet-proof.

[Arsen K.]

I understand. I'm looking for any solution, but no luck. :( Besides, browsers may block file dialog. So click on #button to open input:file - is a bad idea...

[Arsen K.]

Just tested your website in Chrome 24 (latest). As you can see, tooltip is displayed. screencast.com/t/75uHC6YyuGhO

[MEM]

Didn't take away the "no file chosen" for me.

[Nisanth Sojan]

the tooltip is still displayed

[Ram]

@NisanthSojan So make it better, it was just an example.

[Pawan Pillai]

One of the cleanest hack I have seen. Hopefully it will work in all browsers like IE9+, FF, Safari. Runs perfectly in Chrome.

[Brian]

this gets rid of the "no file chosen" for me

[Brilliand]

@MEM, which browser are you on? This is working for me on Chrome (with some modifications because I don't just want the text to disappear).

[Robert Siemer]

Works in Chromium Version 44.0.2403.89 and has no side-effects in version 40.0.3! Great input @simon

[Admin]

Thanks for the edit. I'd like to find a solution without wedkitURL because it's deprecated.

[Monicka]

but your custom title will show up even after choosing files.

[simon]

I think there is simple solution. Check my answer below. I don't see anything simple than that. Also it works in all browsers.

[yvesmancera]

This answer is the only one that worked for me, just replaced the browser detection to the one provided in stackoverflow.com/questions/9847580/…

[Admin]

this is a great solution ! it worked great for me because after uploading the file, the file name would show. nice and thank you!

[2540625]

The title's box (containing the non-breaking space character) still appears, however.

[Es Noguera]

Hey, if you want to hide the "No file choosen" tooltip: use "display:none" style and then use click function when tap the button.

[TonyLuigiC]

I didn't see the solution below until now, since it was so far down the page. In any case, I'm not going to delete my solution, since hopefully the style color information will be useful (it resolved the Firefox issue for me).

[Victor Bredihin]

it's still says 'no file choosen' in your fiddle example

[CETb]

You can hide with style: style='width: 0;overflow: hidden;opacity:0;filter:alpha(opacity=0);display: inline;position: absolute;'

[AshD]

The title box does appear for me with an empty string on chrome.

[AshD]

Did not work for me on chrome (the fiddle itself shows the no file chosen tooltip)

[ConductedClever]

I have integrated this solution with a binding engine (aureliajs, angular, ...) and this works very very fine to compute proper message and show to user.

[ufukomer]

You should just make title="" otherwise title=" " shows a blank tooltip.

[Xenalin]

This is the best answer for 2020. Setting opacity to 0 makes the whole element invisible.

[The Fool]

how is this removing the tooltip? I still see it

[Craig Brown]

This doesn't remove the tooltip that appears when you hover over the button, it just hides the text next to the button.