Question

尝试对地图进行编码，以显示将鼠标悬停在SVG元素上时的名称，并在单击时拉出模式。我只是尝试添加工具提示来显示名称，如下所示：http://www.petercollingridge.co.uk/tutorials/svg/interactive/tooltip/，但是没有弹出任何提示，我不清楚原因。我更改了所有变量名，以便它们与我的文档匹配。这是地图：http://jsfiddle.net/gw5rmb1t/44/

我正在使用的脚本是：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200" id="tooltip-svg-3">
<style>
    #tooltip {
        dominant-baseline: hanging; 
    }
</style>

<rect x="40" y="50" width="80" height="100" fill="#007bbf" class="tooltip-trigger"/>
<rect x="180" y="50" width="80" height="100" fill="#ec008c" class="tooltip-trigger"/>
<text id="tooltip" x="0" y="0" visibility="hidden" >Tooltip</text>

<script type="text/ecmascript"><![CDATA[
    (function() {
        var svg = document.getElementById('tooltip-svg-3');
        var tooltip = svg.getElementById('tooltip');
        var triggers = svg.getElementsByClassName('tooltip-trigger');

        for (var i = 0; i < triggers.length; i++) {
            triggers[i].addEventListener('mousemove', showTooltip);
            triggers[i].addEventListener('mouseout', hideTooltip);
        }

        function showTooltip(evt) {
            var CTM = svg.getScreenCTM();
            var mouseX = (evt.clientX - CTM.e) / CTM.a;
            var mouseY = (evt.clientY - CTM.f) / CTM.d;
            tooltip.setAttributeNS(null, "x", mouseX + 6 / CTM.a);
            tooltip.setAttributeNS(null, "y", mouseY + 20 / CTM.d);
            tooltip.setAttributeNS(null, "visibility", "visible");
            var mouseY = (evt.clientY - CTM.f) / CTM.d;
            tooltip.firstChild.data = evt.target.getAttributeNS(null, "fill");
        }

        function hideTooltip(evt) {
            tooltip.setAttributeNS(null, "visibility", "hidden");
        }
    })()
]]></script>

Answer 1

从原始代码和Vlad274的提示开始工作后，我发现了这一点，这是一个答案，以防将来对任何人有帮助：

摆脱了div标记
在svg和脚本中元素的末尾之间添加了行<text id="tooltip" x="0" y="0" visibility="hidden" >Tooltip</text>
在脚本中，将svg的{{1}}变量设置为id，将svg变量设置为'tooltip'，并设置tooltip变量到地图图钉的类别名称
为每个引脚添加名称属性，并设置：

tooltip.firstChild.data = evt.target.getAttributeNS（null，“名称”）; }

这是更新的jsfiddle起作用的（工具提示没有格式化，但是应该更容易）：http://jsfiddle.net/gw5rmb1t/83/

SVG元素上的工具提示未出现

1 个答案: