search

KABBOUCHI / vue-tippy

VueJS Tooltip powered by Tippy.js
https://vue-tippy.netlify.app
MIT License
722 stars 86 forks source link

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

Open SMNaik123 opened 10 months ago

SMNaik123 commented 10 months ago

Sample code ::

`

`

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

KABBOUCHI commented 8 months ago

@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