user5533614 user5533614 - 5 months ago 30
Javascript Question

Is that possible to add text on hover with svg polygon shape?

Is that possible to add text on hover with svg polygon shape?

My code like this



<svg>
<polygon class="st0" points="0,1.833 638,1.833 383,348.833 0,348.833 "/>
<polygon class="st0" points="0,355.333 649,355.333 891.5,664.833 0,664.833 "/>
<polygon class="st0" points="392.5,348.833 514.75,181.333 645.25,348.833 "/>
<polyline class="st0" points="518.875,174.908 644.667,2.021 1139.833,1.52 1139.75,663.583 897.25,663.583 "/>
</svg>





when I checked many reference there is only examples for a single polygon, But on my code I need 4 shape with different text in a SVG tag. Is that possible to add text on hover with multiple polygons?

Here a fiddle what I have

When I hover I want like this
enter image description here

Any advice would be appreciated

Answer

Yo can add

<title>Your text</title>

tag inside <svg></svg> or <poligon></poligon> tag that shows default tooltip with text on it.

Updated jsfiddle

Source:

.st0 {
  fill: #0491B7;
}
.st1 {
  fill: #0491B7;
}
.st1:hover {
  fill: red;
  opacity: 0.5;
}
.st0:hover {
  fill: red;
}

text{
  display:none;
  fill:#fff;
  font-size:2em;
  font-family:sans-serif;
}

text.sub-text{
  display:none;
  fill:#fff;
  font-size:0.8em;
  font-family:sans-serif;
}

g:hover > text{
  display:block;
}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1139.833px" height="663.313px" viewBox="0 0 1139.833 663.313" style="enable-background:new 0 0 1139.833 663.313;" xml:space="preserve">
 
  <g>
  <polygon class="st0" points="0,0.313 638,0.313 383,347.313 0,347.313 ">
    <title>One</title>
  </polygon>
  <text x="10" y="40"> TITLE </text>
    <text x="10" y="55" class="sub-text">Some Content</text>
    </g>

  <polygon class="st1" points="0,353.813 649,353.813 891.5,663.313 0,663.313 ">
    <title>Two</title>
  </polygon>

  <polygon class="st0" points="392.5,347.313 514.75,179.813 645.25,347.313 ">
    <title>Three</title>
  </polygon>

  <polyline class="st0" points="518.875,173.388 644.667,0.501 1139.833,0 1139.75,662.063 897.25,662.063">
    <title>Four</title>
  </polyline>
</svg>