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

我试图显示在HTML页面中绘制的交互式SVG图像。 我没有使用javascript/jQuery语言的经验，但是使用一些jQuery插件，比如PowerTip，我现在能够在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')));
}});

$（'#myGraph.node'）。在（{powertipperender:function（）上{
var title=“”；
$（'a text'，this）.each（函数（i）{
title+=“”+$（this.text（）；
});
var同义词=”；
$（“同义词”，this）。每个（函数（i）{
同义词+=“
”+解析同义词（$（this）.text（））+“
”；
});
$（this）.data（'powertipjq'$([
“”+标题+”
“，
“同义词”
“+同义词+”
”
].join（'\n'））；
}});

---

t提前点击

我尝试了很多解决方案，从重命名“title”标记到将工具提示设置为空字符串。

---

最后，我明白了不可能阻止显示默认的svg工具提示。

有点晚，但它可以帮助其他人。
可以通过从鼠标中删除所有操作来禁用工具提示

style="pointer-events: none"

影响显示工具提示的子对象。但要小心，它会禁用鼠标中的任何文本选择

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>

工具提示
内容

不要将属性命名为

title

将其称为

message

或

output

之类的东西，这样做会起作用

示例

而不是：

<a href="javascript:void(0)" class="tooltip" title="Hi this is a tooltip.">
<i class="fa fa-question-circle" aria-hidden="true">
</i>
</a>

或者以任何你想要的方式

再见默认浏览器工具提示

在我的情况下

我有

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

---

从SVG中删除标题标记将删除显示的工具提示。

如前所述-您可以删除

title

元素，工具提示将消失。如果希望保留

指针事件

功能，但不需要工具提示，则可以执行此操作。如果您不需要特定元素上的事件，那么使用CSS属性

指针事件：无是一种“更干净”的方式

svg {
  pointer-events: none;
}

下面是我的JavaScript代码示例：

var title_elements = Array.from(my_svg_document.querySelectorAll("title"));

title_elements.forEach(function(el) {
    el.parentNode.removeChild(el);
});

编辑：因为如何获取对
svg
文档的引用并不明显：

my_svg_document = document.getElementById('my_svg_id').contentDocument;

您可以定义/生成一个空的
标题
，以隐藏另一个标题。
此解决方案不禁用鼠标事件



从不显示此标题
工具提示插件禁用默认工具提示。PowerTip工具提示消失的事实表明存在问题。解决了这个问题，默认的工具提示将不会出现。@isherwood:我也这么想，但今天早上我保留了powertip示例（工作得很好），当我用一个简单的svg替换div的文本内容（由php include调用加载）时，Troble再次出现：当我将鼠标悬停在元素上时，它会出现powertip工具提示，然后，默认工具提示（显示我悬停的svg元素的标题）的出现将关闭它。我已经尝试替换“title”标记，以防止出现默认工具提示。现在，即使默认工具提示没有出现，Powertip工具提示也会快速出现和消失。这只发生在SVG元素上。看来我是不正确的。对不起，我不知道您的想法。实际上，在SVG的开头插入一个空的
title
标记是可能的。我在下面添加了一个答案来强调这个解决方案。
var title_elements = Array.from(my_svg_document.querySelectorAll("title"));

title_elements.forEach(function(el) {
    el.parentNode.removeChild(el);
});

my_svg_document = document.getElementById('my_svg_id').contentDocument;