Question

我试图在HTML页面中显示交互式SVG图像。我没有javascript / jQuery语言的经验，但是使用一些像PowerTip这样的jQuery插件我当前能够在hover on SVG元素时显示自定义的工具提示。自定义工具提示出现，但在一秒钟之后消失，当它们被默认工具提示（在所有浏览器中）的外观关闭时，只显示＆＃34;标题＆＃34;的内容。元件。有没有办法禁用默认工具提示？以下是我使用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

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

Answer 4

svg {
  pointer-events: none;
}

Answer 5

正如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;

Answer 6

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

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

Answer 7

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

Answer 8

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

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

8 个答案: