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

Question

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.

$('#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

Answer 1

Short answser:

.no-tooltips {
    pointer-events: none;
}

---

Detailed answer:

You can disable the tooltips by removing all the actions from the mouse. Add it on the child that displays the tooltip. But beware, it also disables any text selection from the mouse.

Example:

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