Как я могу запретить всплывающие подсказки по умолчанию для зависания элементов svg?

Question

Я пытаюсь показать интерактивное изображение SVG, нарисованное на странице HTML. У меня нет опыта работы с javascript/jQuery, но с использованием некоторых плагинов jQuery, таких как PowerTip. В настоящее время я могу показать настраиваемые всплывающие подсказки при наведении на элементы SVG. Индивидуальные всплывающие подсказки появляются, но исчезают через секунду, когда они закрываются появлением всплывающей подсказки по умолчанию (во всех браузерах), показывая так просто содержимое элемента «title». Есть ли способ отключить всплывающие подсказки по умолчанию? Ниже я расскажу о своих настраиваемых всплывающих подсказках с 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

Я пробовал много решений, от переименования «название» метки для установки в подсказке как пустая строка. В конце я понял, что невозможно предотвратить показ всплывающих подсказок svg по умолчанию.

Answer 2

Kinda поздно, но это может помочь кому-то еще.
Вы можете отключить всплывающие подсказки, удалив все действие с помощью мыши.

style="pointer-events: none" 

Воздействуйте на ребенка, который отображает всплывающую подсказку. Но забота, он, как правило, отключил выбор текста с помощью мыши.

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> 

Answer 3

Не называйте атрибут, как 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 4

В моем случае.

У меня есть

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

CSS

a > svg { pointer-events: none; }