Windows系统Chrome浏览器默认Tooltip复刻及调试问题求助

一、冻结默认Tooltip以获取样式（Windows Chrome） #

针对之前尝试的F8断点、mouseout监听、debugger均无效的情况，可按以下步骤操作：

• 打开Chrome DevTools（F12），切换到Elements标签页
• 鼠标悬停在目标元素上，待默认Tooltip显示后，立刻按下Ctrl+Shift+P打开命令菜单
• 输入Disable JavaScript并执行，此时Tooltip会保持显示
• 在Elements面板中找到Tooltip对应的DOM节点（通常为<div role="tooltip">），即可查看它的默认样式
• 调试完成后，再次打开命令菜单执行Enable JavaScript恢复正常功能

二、自定义Tooltip并隐藏默认Tooltip #

你的代码会同时显示默认与自定义Tooltip，核心原因是元素的title属性仍会触发浏览器默认渲染，以下是两种解决方法：

方法1：改用自定义属性存储提示文本（推荐） #

修改HTML与CSS，完全规避默认Tooltip触发逻辑：

.tooltip {
  position: relative;
}

.tooltip[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: -50px;
  left: 25px;
  color: red;
  /* 可添加基础样式优化体验 */
  background-color: #333;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

<span data-tooltip="I am Tool Tip" class="tooltip">Hover over me</span>

方法2：通过JS暂存并移除title属性（适配需保留语义的场景） #

保留原CSS逻辑，通过JS移除title属性避免默认Tooltip触发：

const tooltipElems = document.querySelectorAll('.tooltip');
tooltipElems.forEach(elem => {
  const originalTitle = elem.getAttribute('title');
  elem.setAttribute('data-title', originalTitle);
  elem.removeAttribute('title');
});

同时将CSS中的.tooltip[title]:hover::after修改为.tooltip[data-title]:hover::after即可。

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