如何为SVG地图的国家路径元素添加tooltip？CSS与jQuery尝试均无效

核心问题原因 #

你当前代码失效的核心原因是：你往SVG内部的<a>元素中直接插入了HTML的<span>元素，SVG有独立的命名空间，内部无法直接识别和渲染普通HTML元素，所以你加的.tooltip元素本质上没有被正常解析，CSS自然也不会生效。

修复方案 #

1. 调整DOM结构 #

不要把tooltip插入到SVG内部，在SVG同级位置新增一个全局复用的tooltip元素即可：

<!-- 放在SVG元素同级的页面结构中 -->
<div class="tooltip" id="map-tooltip"></div>

2. 修正CSS代码 #

.tooltip {
    display: block;
    position: absolute;
    width: 190px;
    padding: 5px;
    border-radius: 10px;
    background-color: cadetblue;
    color: #fff;
    line-height: normal;
    text-transform: none;
    font-size: 12px;
    opacity: 0;
    transform: scaleY(0);
    transition: all 0.2s ease;
    pointer-events: none; /* 防止tooltip遮挡鼠标事件 */
    z-index: 999;
}

.tooltip:after {
    position: absolute;
    content: '';
    left: 10px;
    bottom: -5px;
    width: 0;
    height: 0;
    border-top: 5px solid burlywood;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
}

3. 重写JS逻辑 #

通过监听国家元素的鼠标事件，动态更新tooltip的内容和位置：

$(function() {
    const $tooltip = $('#map-tooltip');
    // 鼠标移入国家时显示tooltip
    $('.info').on('mouseenter', function(e) {
        const tipText = $(this).data('tooltip-text');
        $tooltip.text(tipText)
            .css({
                left: e.pageX + 10 + 'px',
                top: e.pageY - $tooltip.outerHeight() - 10 + 'px',
                opacity: 1,
                transform: 'scaleY(1)'
            });
    });
    // 鼠标移动时更新tooltip位置
    $('.info').on('mousemove', function(e) {
        $tooltip.css({
            left: e.pageX + 10 + 'px',
            top: e.pageY - $tooltip.outerHeight() - 10 + 'px'
        });
    });
    // 鼠标移出国家时隐藏tooltip
    $('.info').on('mouseleave', function() {
        $tooltip.css({
            opacity: 0,
            transform: 'scaleY(0)'
        });
    });
});

4. 原有SVG结构无需修改 #

保留你写的SVG内国家元素的代码即可：

<a href="#" class="info" data-tooltip-text="Hint">
    <path d="M1113.7 124.6l0.9 1-2.6 3.4 2.4 5.6-1.6 1.9-3.8-0.1-4.4-2.2-2.1-0.7-3.8 1-0.1-3.5-1.5 0.8-3.3-2.1-1-3.4 5.5-1.7 5.6-0.8 5.1 0.9 4.7-0.1z" id="EE" name="Estonia">
    </path>
</a>

可选优化 #

如果你希望tooltip固定显示在国家中心而非跟随光标，可以用getBBox()方法获取path元素的边界坐标，计算出中心位置替换鼠标坐标即可。

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