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

godmadeus

New member
Joined
May 4, 2017
Messages
31
Points
0
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

New member
Joined
Jan 2, 2017
Messages
16
Points
0
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

New member
Joined
Jul 24, 2019
Messages
1
Points
0
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.
HTML:
<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>
 
Older threads
Replies
6
Views
2,085
Replies
15
Views
4,911
Replies
3
Views
1,644
Replies
0
Views
1,668

Referral contests

Referral link for :

Sponsors

Popular tags

You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.

Top