双击span元素选中文本后title属性失效问题咨询

嘿，这个问题我之前做项目的时候也碰到过！其实这是浏览器的默认交互逻辑在搞鬼——当文本被高亮选中时，浏览器会优先响应选中状态下的操作（比如复制、拖动选中文本），暂时忽略了title属性的悬停提示触发。

下面给你两个实用的解决方案，都是我实际用过的：

方案1：纯CSS自定义Tooltip替代原生title #

这种方法不需要JS，完全靠CSS实现，而且在文本选中时也能正常显示提示：

首先把原生的title换成自定义的data-tooltip属性（避免和原生title的默认行为冲突）：

<span data-tooltip="hello">Hello</span>

然后添加对应的CSS样式：

/* 给元素设置相对定位，作为提示框的容器 */
span[data-tooltip] {
  position: relative;
  cursor: help; /* 鼠标悬停时显示帮助类光标 */
}

/* 渲染提示框的内容 */
span[data-tooltip]:hover::after,
span[data-tooltip].selected::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 120%; /* 让提示框显示在元素上方 */
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
  z-index: 9999;
}

/* 给提示框加个小三角，更像原生tooltip */
span[data-tooltip]:hover::before,
span[data-tooltip].selected::before {
  content: '';
  position: absolute;
  bottom: 105%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #333;
}

方案2：结合JS监听选中状态实现灵活控制 #

如果还是想保留原生title的逻辑，或者需要更复杂的交互，可以用JS监听文本选中状态，手动控制提示的显示：

const targetSpan = document.querySelector('span[title]');

// 监听页面的选中变化事件
document.addEventListener('selectionchange', () => {
  const selection = window.getSelection();
  // 判断当前选中的内容是否包含目标span元素
  if (selection.containsNode(targetSpan, true)) {
    targetSpan.classList.add('selected');
  } else {
    targetSpan.classList.remove('selected');
  }
});

然后配合CSS，当元素有selected类时，显示自定义提示（逻辑和方案1的CSS一致，把:hover的规则同步给.selected即可）。

为什么原生title会失效？ #

简单来说，浏览器的交互优先级是：文本选中状态 > 普通悬停状态。当文本被选中时，浏览器会默认认为用户正在和选中的文本交互，所以不会触发title的悬停提示逻辑。而自定义Tooltip是我们手动控制显示条件，自然不受这个限制。

内容的提问来源于stack exchange，提问作者Thirupathi Raj.V