Is there a way to add a tooltip to specific elements in an SVG?

Ignition
1

I am trying to add tooltips to specific parts of my SVG in ignition. I cannot use the native tooltip as that will apply to the entire drawing component rather than just certain elements of my SVG.

Doing some research tooltips can be done on SVGs through the title element. However I created the svg with a title tooltip on only the rectangle element below:

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 124 124" fill="none">
  <rect width="124" height="124" rx="24" fill="#F97316">
    <title>I&apos;m a Geeky Square</title>
  </rect>
  <path d="M19.375 36.782v63.843a4 4 0 0 0 4 4h63.843c3.564 0 5.348-4.309 2.829-6.828L26.203 33.953c-2.52-2.52-6.828-.735-6.828 2.829" fill="#fff"/>
  <circle cx="63.211" cy="37.539" r="18.164" fill="#000"/>
  <rect opacity=".4" x="81.133" y="80.72" width="17.569" height="17.388" rx="4" transform="rotate(-45 81.133 80.72)" fill="#FDBA74"/>
</svg>

When I imported this into ignition the rectangle element completely ignored the title:

{
  "type": "rect",
  "fill": {
    "paint": "#F97316"
  },
  "name": "rect",
  "width": "124",
  "height": "124",
  "rx": "24"
}

Hence leading me to believe that title tooltips are not supported in ignition. If I am wrong about this or if there is a different way to implement a tooltip on an element of an SVG please help me!

1 Like