How can i prevent default tooltips to be shown hovering on svg elements?
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>
svg {
pointer-events: none;
}
In my case.
I have
<a title="click me plz" >
<svg>
<title> hello title <title>
<g>gggggrrrrrrrr.....</a>
</svg>
</a>
CSS
a > svg { pointer-events: none; }