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

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