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', '');

Answer 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