如何防止在svg元素上显示悬停的默认工具提示？

Question

我试图显示在超文本标记语言页面绘制的交互式SVG图像。我对javascript/jQuery语言没有经验，但是使用一些jQuery插件，比如PowerTip，我目前能够在悬停在SVG元素上时显示定制的工具提示。自定义的工具提示出现，但在一秒钟后消失，当它们被默认工具提示的外观关闭时（在所有浏览器中），只显示标题元素的内容。有办法禁用默认工具提示吗？下面是我使用PowerTip显示自定义工具提示的方法。

$('#myGraph .node').on({ powerTipPreRender: function() {
    var title = "";
    $('a text', this).each( function(i) {
        title += " " + $(this).text();
    });

    var synonyms = "";
    $("synonym", this).each( function(i) {
        synonyms += "<li>" + parseSynonym($(this).text()) + "</li>";
    });
    $(this).data('powertipjq', $([
           '<p><b>' + title + '</b></p>',
           '<p><b>Synonym(s)</b><ul>' + synonyms + '</ul></p>'
           ].join('\n')));
}});

Tnaks提前

Answer 1

就我而言。

我有过

<a title="click me plz" >
   <svg>
    <title> hello title <title>
    <g>gggggrrrrrrrr.....</a>
   </svg>
</a>

CSS

a > svg { pointer-events: none; }

Answer 2

svg {
  pointer-events: none;
}

Answer 3

您可以通过删除鼠标中的所有操作来禁用工具提示：

style="pointer-events: none"

将其添加到显示工具提示的子项上。但请注意，它也会禁用鼠标中的任何文本选择。

例子：

<g xmlns="http://www.w3.org/2000/svg" id="your_id" class="node">
    <title>ToolTips</title>
    <polygon points="x,x x,x x,x x,x x,x"/>
    <text text-anchor="middle" x="foo" y="bar" style="pointer-events: none">content</text>
</g>