Component shows empty tooltip on SVG text

[vincerubinetti]

See this example: https://codesandbox.io/s/vue-tippy-svg-5xfglp

Hovering over the SVG text shows a tooltip, but it is small, as if empty. However if you inspect its contents in the dev tools, the contents are there, they are just not being shown for some bizarre reason. This problem seems to occur in Chrome and Safari. Comparing the popper elements piece by piece, I see no differences between them, except that the SVG tooltip has a user-agent transform-origin: 0 0 style, and unsetting it does nothing.

[vincerubinetti]

I think it has something to do with the needless span (beneath the .tippy-content div) the library wraps the content in, and maybe some listeners that are on it. If you edit the raw HTML and remove the wrapping span (not in javascript with a method that preserves event listeners), it works.

As such, I have the following dirty hack to solve this:

const onShow = (instance: Instance): boolean => {
  const content = instance.props.content;
  if (content instanceof Element) instance.setContent(content.innerHTML);
  return !!String(content).trim(); // irrelevant
};

[KABBOUCHI]

@vincerubinetti i'm not sure why its happening, will debug it this weekend.

As such, I have the following dirty hack to solve this:

this will break vue interactivity, like btns, components, ...

[vincerubinetti]

Indeed, I really don't want to use that hack. Luckily in my case, although I'm rendering a lot of content, including components, the resulting HTML is just simple links and such. Relatedly, fwiw, because I'm rendering so much, I really need the component approach; the directive { content: } method would be an impractical mess.