Tooltip doesn't work on svg element when "interactive = true"

[SMNaik123]

Sample code ::

<svg :viewBox="0 0 500 400" preserveAspectRatio="xMinYMin meet"> <g> <image v-tippy="{ delay: 100, arrow: true, content: 'Hi I'm a tooltip', interactive: true, trigger: 'click' }" height="18" width="18" xlink:href="/images/flag.svg" /> </g> </svg>

Tooltip works perfectly fine on a native HTML element.
When interactive is set to false, the tooltip renders without any issue.

[KABBOUCHI]

@SMNaik123 when you use interactive, it changes the append behavior, and it doesn't work with svgs.

you can fix it, by changing the appendTo, ex:

 <svg viewBox="0 -10 200 20" style="width: 200px">
     <text  v-tippy="{ delay: 100, arrow: true, content: 'Hi \'m a tooltip', appendTo, interactive: true, trigger: 'click' }">
                test
      </text>
 </svg> 

const appendTo = () => document.body

https://vue-tippy.netlify.app/props#appendto