-
Notifications
You must be signed in to change notification settings - Fork 90
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Component shows empty tooltip on SVG text #303
Comments
I think it has something to do with the needless span (beneath the 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
}; |
@vincerubinetti i'm not sure why its happening, will debug it this weekend.
this will break vue interactivity, like btns, components, ... |
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 |
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.The text was updated successfully, but these errors were encountered: