设置pointer-events: none后SVG tooltip不显示，如何兼顾视频可点击？

点击播放图标会弹出视频，当前为.background svg设置了pointer-events: none属性，导致SVG的tooltip无法显示；但如果移除该属性，视频又无法被点击。需要修复实现既能让tooltip正常显示，又能保证视频可点击。

相关代码示例 #

CSS代码 #

.background svg{
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0%;
  pointer-events: none;
}

HTML代码片段 #

<div class="background">
    <svg height="100%" width="100%" viewBox="0 0 856.3 856.2">
        <title>Random Music</title>
    </svg>
</div>

方法一：精准开启SVG元素的事件响应 #

保留.background svg的pointer-events: none，但给SVG内部需要触发tooltip的元素单独设置pointer-events: auto。比如SVG里的图形元素（如path、circle等）需要显示tooltip，可添加如下样式：

/* 替换为你实际需要tooltip的SVG元素选择器 */
.background svg path, .background svg circle {
  pointer-events: auto;
}

这样SVG整体不会阻挡视频的点击事件，同时指定的SVG元素能正常响应鼠标触发<title>的tooltip。

方法二：通过层级调整优先响应视频点击 #

移除.background svg的pointer-events: none，然后给视频容器设置更高的层级，确保视频容器优先接收点击事件：

.background svg{
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0%;
  /* 移除pointer-events: none */
}

/* 替换为你的视频容器实际类名 */
.video-container {
  position: relative;
  z-index: 10;
}

此方式让视频容器处于SVG上方，优先响应点击，SVG则可以正常触发tooltip。

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