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

Question

我正在尝试显示在HTML页面中绘制的交互式SVG图像.我对javascript/jQuery语言没有经验,但是使用像PowerTip这样的jQuery插件我现在能够在悬停在SVG元素上时显示自定义的工具提示.自定义工具提示出现,但在一秒钟之后消失,当它们被默认工具提示(在所有浏览器中)的外观关闭时,只显示"title"元素的内容.有没有办法禁用默认工具提示？以下是我使用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

有点迟到,但它可以帮助别人.
您可以通过从鼠标中删除所有操作来禁用工具提示.

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>

Answer 2

就我而言。

我有

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

的CSS

a > svg { pointer-events: none; }

Answer 3

从 SVG 中删除标题标签将不再显示工具提示。

Answer 4

svg {
  pointer-events: none;
}

Answer 5

我尝试了很多解决方案，从重命名“标题”标签到将工具提示设置为空字符串。最后，我明白不可能阻止显示默认的 svg 工具提示。