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
1,249
Replies
15
Views
2,564
Replies
3
Views
853
Latest threads
Replies
0
Views
7
Replies
0
Views
7
Replies
1
Views
56
Replies
0
Views
42
Recommended threads
Replies
0
Views
2,196
Replies
28
Views
3,496
Replies
1
Views
2,380
Replies
58
Views
15,160

Referral contests

Referral link for :

Sponsors

Latest Blog ArticlesMost Viewed Threads

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