SVG Tooltips

[chrisdburr]

Can anyone help me please by suggesting the best way to get the following to work:

• Embedding a SVG file that has embedded hyperlinks as a href tags in the original file, which can make use of the title attribute functionality of the tooltips extension so that when a user hovers their cursor over the relevant part of the image, the tooltip offers some extra info about the graphic.

So far, the only way I've managed to get the SVG to embed properly is by adding the full code to the relevant .md file. This allows the links to work, but the tooltip extension does not appear to work by adding title attributes.

Relevant portion of the code:

<g id="project_planning">
        <line class="cls-2" x1="663.83" y1="186.07" x2="663.83" y2="86.54"/>
        <g>
          <rect class="cls-23" x="579.55" width="168.56" height="86.54" rx="11.65" ry="11.65"/>
          <a href="test.md" title="This is a tooltip"> 
            <text class="cls-35" transform="translate(623.47 35.33)"><tspan class="cls-31" x="0" y="0">P</tspan><tspan class="cls-47" x="14.44" y="0">r</tspan><tspan class="cls-7" x="22.7" y="0">o</tspan><tspan x="35.89" y="0">j</tspan><tspan class="cls-8" x="41.62" y="0">e</tspan><tspan class="cls-32" x="54.2" y="0">c</tspan><tspan x="66.45" y="0">t </tspan><tspan class="cls-33" x="-8.98" y="28.17">P</tspan><tspan class="cls-36" x="5.6" y="28.17">l</tspan><tspan x="11.19" y="28.17">anning</tspan></text>
          </a>
        </g>
      </g>

Some other (possibly relevant info):

• The SVG is exported from Adobe Illustrator (file attached), as it was designed separately by an illustrator
• To get the image to display correctly, the embedded style tags have to be separated.

[squidfunk]

Interesting use case. My research shows that the title attribute isn't supported – it must be a title element:
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title

However, more research is needed. You can open an issue and I'll investigate if we can add this functionality to SVGs.

[chrisdburr]

Thanks for the rapid response. Adding it as a title element allows the tooltip functionality to work, so is definitely a good solution for the time being.

Happy to open an issue/request for a better solution using markdown syntax though.

Thanks for all the hard work and effort in the meantime—very happy to be a supporter of this project!

[squidfunk]

Thanks for your continued support! ❤️