The SVG <title> is displayed as a tooltip on hovering over the SVG icon.
<div [inlineSVG]="'icons/forward-small.svg' | assetUrl"></div>
I don't want this tooltip (forward-small) to be displayed on hovering over the SVG arrow icon. I tried to set (title="", matTooltip="", or alt="") but didn't work. ai I want also to add a click listener on the SVG.
How can I suppress this tooltip without deleting the title element from the SVG file?
CodePudding user response：
According to MDN docs:
Text in a
<title>element is not rendered as part of the graphic, but browsers usually display it as a tooltip.
Browsers will use this <title> as a tooltip. One workaround would be to disable any pointer-events on the entire svg.
div svg{
pointer-events: none;
}
Note: Use it if you don't want any click listeners on the SVG.
Option 2:
How can I suppress this tooltip without deleting the title element from the SVG file?
You can manipulate the SVG by inserting an empty <title></title> before the actual <title>
let svg=document.querySelector('svg'); //Select your SVG
svg.querySelectorAll('title').forEach(item=>{
item.parentElement.innerHTML='<title></title>' item.parentElement.innerHTML;
});
CodePudding user response：
It works fine by adding the following styles to styles.scss file and it's also possible to add click listeners on the SVG:
svg {
vertical-align: sub;
pointer-events: none;
}