how to add title tag in svg icon files as tooltips on hover

[godmadeus]

now i am implementing svg icon in my website and and it is for categories.

i am not going to show categories name only icons and on hove it should show the category name.

so i want to know how to add title tags in svg icon file so i can make it as tooltip on hover.

now i am using flaticon svg icon file.

 

[achat]

For SVG you need to use a nested <title> element rather than a title attribute. E.g. <polygon points="..."><title>your title</title></polygon>

 

[AjayGohil]

Text in a <title> element is not rendered as part of the graphic, but browsers usually display it as a tooltip. If an element can be described by visible text, it is recommended to reference that text with an aria-labelledby attribute rather than using the <title> element.

<svg viewBox="0 0 20 10" >
  <circle cx="5" cy="5" r="4">
    <title>I'm a circle</title>
  </circle>

  <rect x="11" y="1" width="8" height="8">
    <title>I'm a square</title>
  </rect>
</svg>

<style>
html,body,svg { height:100% }
</style>