CODEWITHSUNDEEP
htmlangularsvg
N.Selwi
N.Selwi

Reputation: 471

Suppress title tooltip of SVG in Angular

The SVG <title> is displayed as a tooltip on hovering over the SVG icon.

<div [inlineSVG]="'icons/forward-small.svg' | assetUrl"></div>

tooltip displayed on hovering over the SVG icon

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?

Upvotes: 0

Views: 940

Answers (2)

N.Selwi
N.Selwi

Reputation: 471

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;
    }

Upvotes: 0

Pankaj Sati
Pankaj Sati

Reputation: 2539

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;
});

Upvotes: 2

Related Questions