16

我正在尝试显示在 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 提前

4

8 回答 8

23

简短的回答:

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

于 2017-01-04T15:02:04.920 回答
18
svg {
  pointer-events: none;
}
于 2018-11-16T20:50:04.553 回答
7

就我而言。

我有

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

CSS

a > svg { pointer-events: none; }
于 2017-07-28T02:08:24.490 回答
6

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

于 2018-07-23T07:42:24.290 回答
3

正如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;
于 2019-08-20T14:51:37.093 回答
1

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

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

于 2019-09-17T09:24:01.263 回答
0

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

于 2013-03-13T13:23:43.460 回答
0

不要将属性命名为title类似messageoutput那样的名称。

例子

代替:

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

于 2017-06-22T01:26:08.193 回答