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

Question

我正在尝试显示在 HTML 页面中绘制的交互式 SVG 图像。我没有使用 javascript/jQuery 语言的经验，但使用 PowerTip 等一些 jQuery 插件，我目前能够在将鼠标悬停在 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')));
}});

提前准备

Answer 1

简答:

.no-tooltips {
    pointer-events: none;
}

---

详细答案:

您可以通过从鼠标中删除所有操作来禁用工具提示。将它添加到显示工具提示的子项上。但请注意，它还会禁用鼠标的任何文本选择。

示例:

.no-tooltips {
    pointer-events: none;
}

<svg viewBox="0 0 100 20" xmlns="http://www.w3.org/2000/svg">
  <g>
    <title>Tooltips</title>
    <text x="0" y="0" font-size="10" dy="0">
      <tspan x="0" dy=".8em">Tooltipsable</tspan>
      <tspan x="0" dy=".8em" class="no-tooltips">Not tooltipsable</tspan>
    </text>
  </g>
</svg>