Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

alt and title not showing up as tooltip for svg path

Tags:

html

svg

I have some svg paths:

<path class="country" id="BLR" title="Belarus" alt="Belarus" d="M948.0142678672362,369.7256153651123L956.0315144997886,372.7549948212553L955.6251153181965,376.68106491420883L956.6993702966163,377.46634055469417L958.4144244330968,381.52092337306806L959.8614899624631,381.6111705103533L961.4358247718692,383.8516898475525L959.6328069741484,385.0654037682009L957.3752698953709,384.53552051711677L958.4665656000917,390.0076939606045L955.9148066459876,390.24630230981074L954.0730841220384,394.2297858860991L953.163550030379,393.0762648682822L950.333965883297,393.353478804788L943.9500919704785,392.13801133565164L939.2092506948762,390.2052953894462L934.5569856401167,390.2170281135237L931.9231336584982,391.7484512915885L932.3814647774813,388.98495674038986L931.0289993180527,387.81385807072303L933.4265401596901,386.10558265025156L933.7995387046943,384.91739193713676L933.1171566924312,379.6478010722885L935.6115604269471,380.1186619031289L939.5640872868389,378.3386011842294L940.8357423463007,375.41130363641486L942.8397126276869,373.56246283729985L943.307715755223,371.87935555833474L946.3215777553021,371.35369709054953Z"></path>

I have both title and alt for each path. When I mouse over the paths in Firefox, I get the little tooltip with the country name. But when I do that in IE or Chrome, nothing happens. Does anyone know why, please?

like image 496
LauraNMS Avatar asked Apr 04 '14 15:04

LauraNMS


People also ask

Can SVG have title?

In the output XML for the SVG, include a title tag directly below the svg tag. The <title> tag for an SVG should be brief, much like an alt attribute for an image. In the SVG tag, include an aria-labelledby attribute that points to the <title> tag.

Should SVG have title?

Title and DescriptionIf an SVG image is purely decorative, do not include a title or description. The SVG element should additional be identified as presentational using the ARIA role attribute.

What tag is used to define a path using SVG?

SVG Path - <path> The <path> element is used to define a path.


1 Answers

Apparently, the correct way to do this in Chrome is to add a <title> element as a child element. See here for more details about this issue.

So it should look like:

<path>
    <title>Belarus</title>
</path>

Here is a live example

like image 96
icanc Avatar answered Sep 19 '22 04:09

icanc