Question

鉴于以下代码，自定义按钮鼠标悬停工具提示的最佳方法是什么？在Chrome中，工具提示会自动设置为＆＃34;未选择文件。＆＃34;在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>

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

1 个答案: