如何让Tooltip属性解析HTML？实现tooltip内添加可点击链接

你当前用CSS伪元素实现的Tooltip，因为content: attr(tooltip)只能读取纯文本内容，所以会把HTML标签原样显示。要让Tooltip解析HTML并支持可点击链接，需要改用真实DOM元素承载Tooltip内容，具体方案如下：

方案一：直接在DOM中嵌入Tooltip内容 #

修改HTML结构 #

把原来的tooltip属性换成内部的Tooltip容器，直接写入HTML内容：

<div class="tooltip-container" flow="right">
  鼠标悬停查看
  <span class="tooltip-content">查看以下链接：<a href='https://google.com/' target='_blank'>网站</a></span>
</div>

调整CSS样式 #

去掉原来的伪元素逻辑，直接针对.tooltip-content设置样式，并支持hover触发显示：

.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip-content {
  text-transform: none;
  font-size: .9em;
  line-height: 1;
  position: absolute;
  display: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  min-width: 3em;
  max-width: 21em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: #333;
  color: #fff;
  padding: 0.5em 1em;
  border-radius: 4px;
  z-index: 1001;
}

/* 箭头样式 */
.tooltip-content::before {
  content: '';
  border: 5px solid transparent;
  position: absolute;
  z-index: 1002;
}

/* 悬停时显示Tooltip */
.tooltip-container:hover .tooltip-content {
  display: block;
  opacity: 1;
}

/* 右侧定位逻辑 */
.tooltip-container[flow^="right"] .tooltip-content {
  top: 50%;
  left: calc(100% + 5px);
  transform: translate(.5em, -50%);
}

.tooltip-container[flow^="right"] .tooltip-content::before {
  top: 50%;
  border-left-width: 0;
  border-right-color: #333;
  right: calc(100% - 5px);
  transform: translate(-.5em, -50%);
}

/* 链接样式设置 */
.tooltip-content a {
  color: #42a5f5;
  text-decoration: underline;
}

方案二：通过自定义属性动态插入HTML（更接近原写法） #

如果不想在DOM中直接写Tooltip内容，可以用data-tooltip-html属性存储HTML，再通过JS动态生成Tooltip容器：

HTML结构 #

<div class="tooltip-container" data-tooltip-html="查看以下链接：<a href='https://google.com/' target='_blank'>网站</a>" flow="right">
  鼠标悬停查看
</div>

补充JS代码 #

初始化所有Tooltip，读取属性内容插入到DOM：

document.querySelectorAll('.tooltip-container').forEach(container => {
  const tooltipHtml = container.getAttribute('data-tooltip-html');
  if (tooltipHtml) {
    const tooltipEl = document.createElement('span');
    tooltipEl.className = 'tooltip-content';
    tooltipEl.innerHTML = tooltipHtml;
    container.appendChild(tooltipEl);
  }
});

CSS样式 #

和方案一的CSS完全一致即可。

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