如何解决Safari浏览器无法显示自定义tooltiptext悬浮提示的问题

解决Safari下自定义tooltip悬浮不生效问题 #

最优方案：根标识类+CSS适配（无需逐个操作元素，维护成本最低） #

第一步：调整浏览器检测逻辑，给Safari环境加全局标识

const userAgentString = navigator.userAgent;
// 补全你缺失的Chrome浏览器检测逻辑
let chromeAgent = userAgentString.indexOf("Chrome") > -1;
let safariAgent = userAgentString.indexOf("Safari") > -1;
if (chromeAgent && safariAgent) safariAgent = false;

// 检测到Safari时给html根节点加专属类，后续用CSS做适配
if (safariAgent) {
  document.documentElement.classList.add('is-safari');
}

第二步：调整CSS，解决优先级和Safari兼容问题

.tlp {
  position: relative;
  display: inline-block;
  /* 解决Safari下非可交互自定义标签不触发hover的bug */
  cursor: pointer;
}
.tlp .tooltiptext {
  background-color: #FDF5BF;
  color: #404040;
  position: absolute;
  z-index: 1;
  text-align: center;
  top: -225%;
  left: -50%;
  /* 统一设置默认隐藏，不需要额外加sss类 */
  visibility: hidden;
}
/* 非Safari浏览器沿用原有hover逻辑 */
.tlp:hover .tooltiptext {
  visibility: visible;
}
/* Safari下强制适配，优先级足够覆盖原有规则 */
.is-safari .tlp:hover .tooltiptext {
  visibility: visible !important;
}

第三步：简化HTML结构，删除冗余类

<p3><hili class="tlp">Color<p5 class="tooltiptext t2">pink</p5></hili>

替代方案：JS事件监听实现（适合需要附加悬浮逻辑的场景） #

如果需要用JS直接控制显示隐藏，可以给所有tooltip容器绑定悬浮事件：

if (safariAgent) {
  document.querySelectorAll('.tlp').forEach(tlpEl => {
    const tooltip = tlpEl.querySelector('.tooltiptext');
    // 移入时显示
    tlpEl.addEventListener('mouseenter', () => {
      tooltip.style.visibility = 'visible';
    });
    // 移出时隐藏
    tlpEl.addEventListener('mouseleave', () => {
      tooltip.style.visibility = 'hidden';
    });
  })
}

之前代码失效的核心原因 #

1. CSS优先级不足：单独的.ccc类权重只有10，远低于.tlp .tooltiptext的权重20，就算加了类也覆盖不了原有样式
2. 逻辑错位：原来的JS只在页面加载时执行一次类切换，没有和hover动作绑定，无法实现悬浮触发的效果
3. Safari兼容问题：自定义非可交互标签（hili、p5等）在Safari下默认不会触发hover事件，给容器加cursor: pointer即可解决

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