Search code examples
svghovertooltippolygontitle

Inline svg-polygon hover tooltips

For some reason the same title (Text 1) is displaying when hovering on all polygons. How to create unique titles or tooltips?

https://codepen.io/fka_dingo/pen/WXQrGe

  <polygon class="st0" points="675.9,148.9 600.4,29 524.9,148.9" />
  <title>Text 1</title>
  </polygon>

  <polygon class="st1" points="438.6,283.6 759.5,283.6 688.5,171 509.6,171" />
  <title>Text 2</title>
  </polygon>

Thanks!

Solution

  • The polygon tags are incorrectly closed. They have a /> which closes them and so the title elements are not polygon children. I've replaced the /> with > on the polygon elements below.

    <svg viewBox="0 0 800 800">
<polygon class="st0" points="675.9,148.9 600.4,29 524.9,148.9">
  <title>Text 1</title>
  </polygon>

  <polygon class="st1" points="438.6,283.6 759.5,283.6 688.5,171 509.6,171">
  <title>Text 2</title>
  </polygon>
</svg>