javascript 如何防止在 svg 元素上悬停显示默认工具提示？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15068568/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can i prevent default tooltips to be shown hovering on svg elements?
提问by Oscar
I'm trying to show an interactive SVG image drawn in a HTML page. I'm not experienced with javascript/jQuery language, but using some jQuery plugins like PowerTip I'm currently able to show customized tooltips when hovering on SVG elements. Customized tooltips appear, but disappear after a second, when they're closed by the appearance of default tooltip (in all browsers), showing so just the content of "title" element. Is there a way to disable default tooltips? Below is what I do to show my customized tooltips with PowerTip.
我正在尝试显示在 HTML 页面中绘制的交互式 SVG 图像。我没有使用 javascript/jQuery 语言的经验，但使用一些 jQuery 插件（如 PowerTip）我目前能够在悬停在 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')));
}});
Tnaks in advance
提前准备
采纳答案by Oscar
I tried a lot of solutions, from renaming the "title" tag to setting the tooltip as an empty string. At the end, I understood that's not possible to prevent showing the default svg tooltips.
我尝试了很多解决方案，从重命名“title”标签到将工具提示设置为空字符串。最后，我明白不可能阻止显示默认的 svg 工具提示。
回答by Sail
Kinda late, but it could help someone else.
You can disabled the tooltips by removing all the action from the mouse.
有点晚了，但它可以帮助别人。
您可以通过删除鼠标的所有操作来禁用工具提示。
style="pointer-events: none"
Affect it on the child who display the tooltip. But care, it alors disabled any selection of the text from the mouse.
影响显示工具提示的孩子。但是请注意，它也禁用了从鼠标中选择的任何文本。
Exemple :
例子：
<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>
回答by Melanie Seifert
svg {
pointer-events: none;
}
回答by vanduc1102
In my case.
就我而言。
I have
我有
<a title="click me plz" >
<svg>
<title> hello title <title>
<g>gggggrrrrrrrr.....</a>
</svg>
</a>
CSS
CSS
a > svg { pointer-events: none; }
回答by Girish Sadanandan
Removing the title tag from SVG will remove the tooltips from appearing.
从 SVG 中删除标题标签将不再显示工具提示。
回答by Emir
As Girish Sadanandanalready said - you can remove titleelements altogether and tooltips will disappear. You can do this if you want to retain pointer-eventsfunctionality but get rid of tooltips. If you don't need events on that specific element then using CSS attribute pointer-events: none;is a 'cleaner' way to go.
正如Girish Sadanandan已经说过的 - 您可以title完全删除元素并且工具提示将消失。如果您想保留pointer-events功能但摆脱工具提示，则可以执行此操作。如果您不需要该特定元素上的事件，那么使用 CSS 属性pointer-events: none;是一种“更干净”的方法。
Here my JavaScript code sample :
这是我的 JavaScript 代码示例：
var title_elements = Array.from(my_svg_document.querySelectorAll("title"));
title_elements.forEach(function(el) {
el.parentNode.removeChild(el);
});
Edit: Since it's not so obvious how to get a reference to an svgdocument:
编辑：由于如何获取对svg文档的引用并不那么明显：
my_svg_document = document.getElementById('my_svg_id').contentDocument;
回答by luis
Don't name the attribute as titlecall it something like messageor outputthat will do the trick.
不要将属性命名为title类似message或output那样的名称。
EXAMPLE
例子
Instead of:
代替：
<a href="javascript:void(0)" class="tooltip" title="Hi this is a tooltip.">
<i class="fa fa-question-circle" aria-hidden="true">
</i>
</a>
Use:
利用：
<a href="javascript:void(0)" class="tooltip" message="Hi this is a tooltip.">
<i class="fa fa-question-circle" aria-hidden="true">
</i>
</a>
And at last but not least important, apply your desired format as it follows:
最后但同样重要的是，按如下方式应用所需的格式：
.tooltip:hover:after {
content: attr(message);
position: absolute;
background:#fff;
border:#000 solid 1px;
color:#000;
font-weight:300 !important;
padding:10px;
}
Or in any way you want.
或者以任何你想要的方式。
And goodbye default browser tooltips!
告别默认浏览器工具提示！
回答by Gerrit Sedlaczek
You can define an empty titleto hide the other one.
This solution does not disable mouse events.
您可以定义一个空title来隐藏另一个。此解决方案不会禁用鼠标事件。
<svg height="100" width="100">
<title></title>
<circle cx="50" cy="50" r="50" fill="grey"/>
<title>never show this title</title>
</svg>