为何下述CSS提示样式对<input>元素无效？多数元素可正常生效

首先先回顾一下你的实现逻辑：你通过[data-title]选择器给目标元素设置相对定位，然后利用:hover::before生成提示框文本、:hover::after生成箭头，这个方案在<p>这类常规元素上能正常工作，但到<input>就失效了，问题出在**<input>的元素类型上**。

核心原因：<input>是替换元素 #

HTML里的元素分为两类：替换元素和非替换元素。

• 非替换元素（比如<p>、<div>、<span>）的内容由元素自身的内容树决定，浏览器会在元素内部渲染内容，所以可以通过::before/::after插入伪元素。
• 替换元素（比如<input>、<img>、<select>、<textarea>）的内容是由浏览器外部渲染的（比如输入框的文本区域、图片的像素内容），它们没有可供伪元素插入的内容树，因此浏览器不会为这类元素生成::before和::after伪元素——这就是你的提示框在<input>上不生效的根本原因。

解决方案 #

针对这个问题，有两种常用的解决思路：

方案1：用容器包裹<input> #

给<input>套一个非替换元素（比如<span>），把data-title属性转移到容器上，容器设置为inline-block或inline以保持原有布局，这样原来的CSS就能正常工作了：

<!-- 修改后的HTML -->
<span data-title="Test input tooltips" style="position: relative; display: inline-block;">
  <input type="text" />
</span>

你的原有CSS不需要做任何修改，伪元素会生成在容器元素上，定位依然能对准<input>。

方案2：用JavaScript实现提示框 #

如果不想额外添加容器，可以用JS监听鼠标事件，动态创建和销毁提示框元素，这种方式不受替换元素的限制，兼容性也更好：

// 给所有带data-title的input绑定提示框事件
document.querySelectorAll('input[data-title]').forEach(input => {
  // 鼠标移入时创建提示框
  input.addEventListener('mouseenter', (e) => {
    // 创建提示框文本容器
    const tooltip = document.createElement('div');
    tooltip.textContent = e.target.dataset.title;
    tooltip.style.cssText = `
      position: absolute;
      top: ${e.target.getBoundingClientRect().top - 30 + window.scrollY}px;
      left: ${e.target.getBoundingClientRect().left + window.scrollX}px;
      padding: 3px 6px;
      border-radius: 2px;
      background-color: cadetblue;
      color: #fff;
      font-size: 12px;
      font-family: sans-serif;
      white-space: nowrap;
      z-index: 9999;
      pointer-events: none; /* 避免提示框干扰鼠标事件 */
    `;

    // 创建箭头元素
    const arrow = document.createElement('div');
    arrow.style.cssText = `
      position: absolute;
      top: ${e.target.getBoundingClientRect().top - 7 + window.scrollY}px;
      left: ${e.target.getBoundingClientRect().left + 8 + window.scrollX}px;
      border: 8px solid transparent;
      border-top: 8px solid cadetblue;
      z-index: 9999;
      pointer-events: none;
    `;

    // 添加到页面
    document.body.appendChild(tooltip);
    document.body.appendChild(arrow);

    // 存到input上方便后续移除
    e.target._tooltip = tooltip;
    e.target._arrow = arrow;
  });

  // 鼠标移出时销毁提示框
  input.addEventListener('mouseleave', (e) => {
    if (e.target._tooltip && e.target._arrow) {
      document.body.removeChild(e.target._tooltip);
      document.body.removeChild(e.target._arrow);
      delete e.target._tooltip;
      delete e.target._arrow;
    }
  });
});

这样无论是替换元素还是非替换元素，都能正常显示提示框了。

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