为 SVG <image> 标签创建工具提示

Question

我正在尝试创建一个工具提示，当用户将鼠标悬停在图标上时将显示该工具提示，该工具提示将提供有关该事件的信息。标记位于 SVG 图像中。

这是图片的代码：

<image  class="tooltip-trigger" data-tooltip-text="Battles" id="Battles" x="100" y="200" width="30" height="30" xlink:href="battle.png" />


<g id="tooltip" visibility="hidden" >
        <rect x="2" y="2" width="80" height="24" fill="black" opacity="0.4" rx="2" ry="2"/>
        <rect width="80" height="24" fill="white" rx="2" ry="2"/>
        <text x="3" y="6">Tooltip</text>
    </g>


<script type="text/ecmascript"><![CDATA[
    (function() {
        var svg = document.getElementById('tooltip-svg-5');
        var tooltip = svg.getElementById('tooltip');
        var tooltipText = tooltip.getElementsByTagName('text')[0].firstChild;
        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 x = (evt.clientX - CTM.e + 6) / CTM.a;
            var y = (evt.clientY - CTM.f + 20) / CTM.d;
            tooltip.setAttributeNS(null, "transform", "translate(" + x + " " + y + ")");
            tooltip.setAttributeNS(null, "visibility", "visible");
            tooltipText.data = evt.target.getAttributeNS(null, "data-tooltip-text");
        }
        function hideTooltip(evt) {
            tooltip.setAttributeNS(null, "visibility", "hidden");
        }
    })()
]]></script>

加载时，提示不出现

Answer 1

您的代码正在运行。您可能遇到的问题是工具提示主要出现在 svg 元素之外。我已将 overflow:visible; 添加到 svg 元素，现在您可以看到工具提示了。

  (function() {
        var svg = document.getElementById('tooltip-svg-5');
        var tooltip = svg.getElementById('tooltip');
        var tooltipText = tooltip.getElementsByTagName('text')[0].firstChild;
        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 x = (evt.clientX - CTM.e + 6) / CTM.a;
            var y = (evt.clientY - CTM.f + 20) / CTM.d;
            tooltip.setAttributeNS(null, "transform", "translate(" + x + " " + y + ")");
            tooltip.setAttributeNS(null, "visibility", "visible");
            tooltipText.data = evt.target.getAttributeNS(null, "data-tooltip-text");
        }
        function hideTooltip(evt) {
            tooltip.setAttributeNS(null, "visibility", "hidden");
        }
    })()

svg{border:1px solid; overflow:visible;display:block;margin:auto}

<svg id="tooltip-svg-5" viewBox="0 -8 130 238" width="200">

  <image class="tooltip-trigger" data-tooltip-text="Battles" id="Battles" x="100" y="200" width="30" height="30" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/pin.png" /> 
  <g id="tooltip" visibility="hidden"> 
    <rect x="2" y="2" width="80" height="24" fill="black" opacity="0.4" rx="2" ry="2"/> 
    <rect width="80" height="24" fill="white" rx="2" ry="2"/> 
    <text x="3" y="6">Tooltip</text> 
  </g> 
</svg>

另一种选择是在文本中添加text-anchor="end" 并相应地重写矩形。

另一种药水会使用 HTML 元素作为工具提示。