The title attribute on an <svg> tag adds title text to the svg image.
Hovering the mouse over the image will not display a tooltip, but screenreaders can use the title text.
A title attribute on an <svg> image.
Note: no tooltip appears when hovering over the svg image.
<svg title="Circle" width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="steelblue"
stroke-width="2" fill="lightblue" />
</svg>
The title attribute is placed on the <svg> opening tag.
The value can be any string. Hover over the svg and a tooltip appears.
The title attributes attaches additional information to the <svg> image.
The title attribute value can be read by screenreaders.
No tooltip appears when the svg element is hovered.
Use the svg <title>
tag to get a tooltip on the svg image.
<svg title="value">
Value | Description |
---|---|
value | A string value. A title can span multiple lines by including newline or carriage-return characters: or 
. |
Here is when title support started for each browser:
Chrome
|
4.0 | Jan 2010 |
Firefox
|
3.0 | Jun 2008 |
IE/Edge
|
9.0 | Mar 2011 |
Opera
|
10.1 | Jun 2010 |
Safari
|
3.2 | Nov 2008 |
Back to <svg>