将工具提示添加到文件浏览输入

Question

给定以下代码，自定义按钮鼠标的工具提示的最佳方法是什么？在Chrome中，工具提示是自动设置的"无选择的文件"。在Edge中没有默认的工具提示。JavaScript是否需要？

<div id="Dialog--Person">
  <form>
    <input placeholder="Enter First Name..." id="personFirstName" >
    <input placeholder="Enter Last Name..." id="personLastName" >
    <input placeholder="Enter Title..." id="personTitle" >
    <input placeholder="Enter Office Phone..." id="personPhone" >
    <input placeholder="Enter Mobile Phone..." id="personMobile" >
    <input placeholder="Enter Email..." id="personEmail" >
    <input type="file" value="upload" class="form-control" id="personPhoto" name="photo">
  </form>
</div>

codepen

Answer 1

您需要添加 title并将值传递给以下概念如下所示。它将与所有浏览器一起使用，并在工具提示中显示相同的文本。

<input type="file" value="upload" class="form-control" id="personPhoto" name="photo" title="Please select file."> 

<div id="Dialog--Person">
  <form>
    <input placeholder="Enter First Name..." id="personFirstName" >
    <input placeholder="Enter Last Name..." id="personLastName" >
    <input placeholder="Enter Title..." id="personTitle" >
    <input placeholder="Enter Office Phone..." id="personPhone" >
    <input placeholder="Enter Mobile Phone..." id="personMobile" >
    <input placeholder="Enter Email..." id="personEmail" >
    <input type="file" value="upload" class="form-control" id="personPhoto" name="photo" title="Please select file.">
  </form>
</div>