如何自定义文件浏览输入框tooltip？Chrome/Edge差异及是否需JS？

这个问题我之前也处理过，刚好可以给你捋清楚最佳方案、浏览器差异以及是否需要JS的问题：

一、最佳实现方式：自定义UI模拟（推荐） #

Chrome的原生file input tooltip是浏览器硬编码的，没法直接用title属性覆盖，而且各浏览器表现不一致（比如Edge无默认提示）。最稳妥且灵活的方式是隐藏原生file input，用自定义元素模拟交互，这样能完全掌控tooltip的内容和显示逻辑：

具体步骤&示例代码 #

<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="personOfficePhone">

    <!-- 自定义文件输入区域 -->
    <div class="custom-file-wrap">
      <button type="button" class="custom-file-btn" title="点击选择个人相关文件">选择文件</button>
      <!-- 隐藏原生输入框，但保留功能 -->
      <input type="file" id="personFile" class="hidden-file-input">
      <!-- 用于显示选中的文件名 -->
      <span class="file-name"></span>
    </div>
  </form>
</div>

<style>
.hidden-file-input {
  position: absolute;
  left: -9999px;
  opacity: 0;
  z-index: -1;
}
.custom-file-btn {
  padding: 8px 16px;
  background: #2196F3;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.file-name {
  margin-left: 8px;
  font-size: 14px;
  color: #666;
}
</style>

<script>
const customBtn = document.querySelector('.custom-file-btn');
const fileInput = document.querySelector('.hidden-file-input');
const fileNameDisplay = document.querySelector('.file-name');

// 点击自定义按钮触发原生输入框的点击事件
customBtn.addEventListener('click', () => {
  fileInput.click();
});

// 选中文件后更新显示文本和tooltip
fileInput.addEventListener('change', () => {
  if (fileInput.files.length > 0) {
    const fileName = fileInput.files[0].name;
    fileNameDisplay.textContent = fileName;
    // 把tooltip改成选中的文件名
    customBtn.setAttribute('title', `已选择文件：${fileName}`);
  } else {
    fileNameDisplay.textContent = '';
    customBtn.setAttribute('title', '点击选择个人相关文件');
  }
});
</script>

这种方式的好处是：

• 完全统一各浏览器的表现，不会出现Chrome有默认提示、Edge没有的情况
• 可以自由定制tooltip的内容，比如未选文件时显示引导语，选中后显示文件名
• 还能同步自定义按钮的文本，提升用户体验

二、如果要保留原生输入框：用JS覆盖tooltip #

如果一定要保留原生file input的外观，那只能通过JavaScript来拦截浏览器的默认tooltip行为，自己实现：

<input type="file" id="personFile">

<script>
const fileInput = document.getElementById('personFile');
let customTooltip = null;

// 监听鼠标悬浮事件，阻止默认tooltip并显示自定义的
fileInput.addEventListener('mouseover', (e) => {
  e.preventDefault(); // 阻止浏览器显示默认的"No file chosen"
  // 创建自定义tooltip元素
  customTooltip = document.createElement('div');
  customTooltip.style.cssText = `
    position: absolute;
    background: #333;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    z-index: 9999;
    font-size: 14px;
  `;
  // 根据是否选中文件设置tooltip内容
  customTooltip.textContent = fileInput.files.length 
    ? `已选择：${fileInput.files[0].name}` 
    : '点击选择文件';
  
  // 设置tooltip的位置
  const inputRect = fileInput.getBoundingClientRect();
  customTooltip.style.top = `${inputRect.bottom + window.scrollY + 5}px`;
  customTooltip.style.left = `${inputRect.left + window.scrollX}px`;
  
  document.body.appendChild(customTooltip);
});

// 鼠标离开时移除自定义tooltip
fileInput.addEventListener('mouseout', () => {
  if (customTooltip) {
    document.body.removeChild(customTooltip);
    customTooltip = null;
  }
});

// 选中文件后，如果tooltip正在显示，更新内容
fileInput.addEventListener('change', () => {
  if (customTooltip) {
    customTooltip.textContent = fileInput.files.length 
      ? `已选择：${fileInput.files[0].name}` 
      : '点击选择文件';
  }
});
</script>

三、关于浏览器差异与是否必须用JS #

• 浏览器差异：Chrome会给未选中文件的file input强制显示"No file chosen"的tooltip，这是浏览器的原生行为，纯HTML/CSS无法修改；而Edge（包括Chromium版的部分场景）没有这个默认提示，导致体验不一致。
• 是否必须用JS：是的。因为纯HTML/CSS无法覆盖Chrome的原生tooltip逻辑，想要实现自定义且统一的tooltip效果，必须借助JavaScript——要么用JS模拟整个自定义UI（推荐第一种方案），要么用JS拦截事件并实现自定义tooltip。

内容的提问来源于stack exchange，提问作者dikuw