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

How can i prevent default tooltips to be shown hovering on svg elements?

本文关键字：svg 元素 显示 工具提示 何防止 默认      更新时间：2023-09-26

我正在尝试显示一个在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')));
}});

Tnaks提前

短应答器：

.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>

svg {
  pointer-events: none;
}

在我的例子中。

我有

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

CSS

a > svg { pointer-events: none; }

从SVG中删除title标记将删除工具提示。

正如Girish Sadanandan所说，您可以完全删除title元素，工具提示将消失。如果您希望保留pointer-events功能，但不使用工具提示，则可以执行此操作。如果您不需要该特定元素上的事件，那么使用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;

不要将属性命名为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/

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

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

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

相关文章：