How to Remove the "No File Chosen" Tooltip from a File Input in Chrome

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

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

Change the No file chosen:

I'm pretty sure you cannot change the default labels on buttons, they are hard-coded in browsers (each browser rendering the buttons captions its own way). Check out this button styling article

hiding a No file chosen tooltip in Javascript

This finally works well:

var obElement = document.getElementsByClassName('input-file')[0];//the title property overrides tooltip's descriptionobElement.setAttribute('title', ' ');

.flex-style{ display: flex;}
.input-file{ opacity: 0; margin-left: -40px; width: 40px; height: 45px;}
.icon{ width: 40px; height: 45px; background-color: blueviolet; }

<div class='flex-style'><div class='icon'></div><input class='input-file' type='file'></div>

Remove no file chosen according to condition

You can use CSS class and a bit of js for this:

  @if(Model.value != null){
    <input type="file" onchange="fileOnchange(this)" class="notext"/>
    <script>
      function fileOnchange(el){
        if(el.value){
          el.className = "";
        }
        else{
          el.className = "notext";
        }
      }
    <script/>
    <style type="text/CSS">
    .notext{
      color: transparent;
    }
    <style/>
  }
  else
  {
    <input type="file" />
  }

How to remove no file selected from type=file inputs?

There is no cross-browser way to do this. The "no file selected" text is in the implementation-defined part of the widget, and I don't believe that most browsers offer much in the way of browser-specific customization. On the other hand, you could simply use CSS to cover the text with something when the value attribute is empty.

How to hide No file chosen text on xp:fileUpload control?

Use this answer which basically creates a styled span that hides the underlying input file button: https://stackoverflow.com/a/9164004/785061

Disable link reference tooltip in browsers

you could do it in older browsers, which would hide the status bar.

But to switch it off manually you could put this script in page somewhere...it removes href tag attaches onclick event listener...

$("body").on('mouseover', 'a', function (e) {
    var $link = $(this),
        href = $link.attr('href') || $link.data("href");

    $link.off('click.chrome');
    $link.on('click.chrome', function () {
        window.location.href = href;
    })
    .attr('data-href', href) //keeps track of the href value
    .css({ cursor: 'pointer' })
    .removeAttr('href'); // <- this is what stops Chrome to display status bar
});