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

Question

我想展示一个在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')));
}});

提前感谢

- Oscar

---

工具提示插件禁用默认工具提示。您的PowerTip工具提示消失的事实表明存在问题。解决这个问题，那么默认的工具提示就不会出现了。 - isherwood

@isherwood：我也是这么想的，但今天早上我保留了powertip示例（完美运行），当我用一个简单的svg替换div的文本内容时，通过php include调用加载，问题再次出现：当我悬停在元素上时，它会出现powertip工具提示，然后默认工具提示出现并关闭（显示我悬停的svg元素的标题）。 - Oscar

我已经尝试替换“title”标签以防止默认工具提示。现在，即使默认工具提示不出现，Powertip工具提示也会快速出现和消失。这只发生在SVG元素上。 - Oscar

看来我是错了。很抱歉，我没有任何建议给你。 - isherwood

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>

- Sail

Answer 2

svg {
  pointer-events: none;
}

- Melanie Ceraso

Answer 3

在我的情况下。

我有

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

CSS

a > svg { pointer-events: none; }

- vanduc1102

Answer 4

从SVG中删除标题标签将会导致工具提示不再出现。

- Girish Sadanandan

Answer 5

如Girish Sadanandan所说-您可以完全删除标题元素，这样工具提示将消失。如果您想保留指针事件功能但要摆脱工具提示，则可以这样做。如果您不需要在该特定元素上使用事件，则使用CSS属性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;

- Emir

Answer 6

不要将属性命名为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 href="javascript:void(0)" class="tooltip" message="Hi this is a tooltip.">
<i class="fa fa-question-circle" aria-hidden="true">
</i>
</a>

最后但同样重要的是，按照以下方式应用所需的格式：

.tooltip:hover:after {
  content: attr(message);
  position: absolute;
  background:#fff;
  border:#000 solid 1px;
  color:#000;
  font-weight:300 !important;
  padding:10px;
}

或者以任何你想要的方式。

再见默认浏览器工具提示！

https://jsfiddle.net/1vsd5dxp/

- Luis

Answer 7

我尝试了很多解决方案，从重命名“title”标签到将工具提示设置为空字符串。 最后，我明白了无法防止显示默认的SVG工具提示。

- Oscar

---

实际上，通过在SVG开头插入一个空的title标签是可能的。我在下面添加了一个答案来突出这个解决方案。 - Gerrit Sedlaczek

<g class="tick" opacity="1"> <text>进行中...</text> <title>到达目的地</title> </g> 删除标题后，可以忽略默认工具提示，并添加自定义工具提示。 - Varadha Raj

Answer 8

你可以定义 / 生成空的 title 来隐藏另一个标题。这种方法不会禁用鼠标事件。

<svg height="100" width="100">
  <title></title>
  <circle cx="50" cy="50" r="50" fill="grey"/>
  <title>never show this title</title>
</svg>

- Gerrit Sedlaczek