如何使用CSS实现SVG路径及图形的自定义Tooltip提示功能

核心原因 #

你当前使用的::after伪元素实现自定义Tooltip的方案，仅支持HTML命名空间下的普通元素（如span、div），SVG命名空间内的path、rect、g等元素原生不支持CSS伪元素渲染，属于规范层面的限制，并非配置遗漏。

可行实现方案 #

我们可以通过少量JS监听事件，统一处理HTML和SVG元素的Tooltip展示，无需修改原有样式逻辑，修改后完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 原有Tooltip基础样式 */
        [data-tooltip]{
            cursor: default;
        }
        /* 新增全局Tooltip容器样式 */
        #global-tooltip {
            position: absolute;
            width: 140px;
            text-align: center;
            box-sizing: border-box;
            color: white;
            background: black;
            padding: 8px;
            border-radius: 10px;
            font-size: 0.9em;
            font-weight: bold;
            visibility: hidden;
            opacity: 0;
            transform: translateY(10px);
            transition: opacity 0.3s, transform 0.2s;
            z-index: 9999;
            pointer-events: none;
        }
        #global-tooltip.show {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        center{
            margin-top: 100px;
        }
        #box{
            width: 400px;
        }
        .d1{
            margin-bottom: 50px;
        }
    </style>
</head>
<body>
    <!-- 新增全局Tooltip容器 -->
    <div id="global-tooltip"></div>
    <center>
        <div class="d1">
            <span data-tooltip="Data-tooltip above the box">Tooltip working in span</span>
        </div>
        <svg id="box" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 386 344">
            <g >
                <rect  x="0.5" y="0.5" width="385" height="343" fill="#fff" />
                <path   d="M737,158V500H353V158H737m1-1H352V501H738V157Z" transform="translate(-352 -157)"/>
            </g>
            <g id="box4">
                <rect  data-tooltip="Tooltip in the bottom right box" x="191.5" y="172.5" width="194" height="171" fill="#d1cbcb"/>
                <path  data-tooltip="Tooltip in the bottom right box" d="M737,330V500H544V330H737m1-1H543V501H738V329Z" transform="translate(-352 -157)"/>
                <title  >Title in the bottom right box</title>
            </g>
            <g id="box3">
                <rect data-tooltip="Title in the top left box" x="0.5" y="0.5" width="194" height="171" fill="#d1cbcb"/>
                <path data-tooltip="Title in the top left box" d="M546,158V328H353V158H546m1-1H352V329H547V157Z" transform="translate(-352 -157)"/>
                <title>Title in the top left box</title>
            </g>
            <g id="box2">
                <rect data-tooltip="Title in the bottom left box" x="0.5" y="172.5" width="194" height="171" fill="#aaa9a9"/>
                <path data-tooltip="Title in the bottom left box" d="M546,330V500H353V330H546m1-1H352V501H547V329Z" transform="translate(-352 -157)"/>
                <title>Title in the bottom left box</title>
            </g>
            <g id="box1" >
                <rect data-tooltip="Title in top right box" x="191.5" y="0.5" width="194" height="171" fill="#aaa9a9"/>
                <path data-tooltip="Title in top right box" d="M737,158V328H544V158H737m1-1H543V329H738V157Z" transform="translate(-352 -157)"/>
                <title>Title in top right box</title>
            </g>
        </svg>
    </center>
    <script>
        const tooltip = document.getElementById('global-tooltip');
        // 监听所有带data-tooltip的元素
        document.querySelectorAll('[data-tooltip]').forEach(el => {
            // 移入显示
            el.addEventListener('mouseenter', e => {
                const text = el.getAttribute('data-tooltip');
                tooltip.textContent = text;
                // 计算位置：元素上方居中
                const rect = el.getBoundingClientRect();
                tooltip.style.left = `${rect.left + rect.width/2 - 70}px`;
                tooltip.style.top = `${rect.top - 40 + window.scrollY}px`;
                tooltip.classList.add('show');
            })
            // 移出隐藏
            el.addEventListener('mouseleave', () => {
                tooltip.classList.remove('show');
            })
        })
    </script>
</body>
</html>

实现说明 #

• 新增了一个全局的div容器承载Tooltip内容，规避SVG不支持伪元素的限制
• 所有带data-tooltip属性的元素（包含SVG内部元素）都会自动触发自定义Tooltip，和你原有span的样式完全一致
• 代码保留了原生title属性，Tooltip不生效时也有降级的原生提示

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