Component shows empty tooltip on SVG text about vue-tippy HOT 3 OPEN

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
};

from vue-tippy.

@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, ...

from vue-tippy.

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.

from vue-tippy.