search

atomiks / tippyjs

Tooltip, popover, dropdown, and menu library
https://atomiks.github.io/tippyjs/
MIT License
12.03k stars 520 forks source link

Interactive Tippy inside WebComponent #882

Closed LukeTOBrien closed 3 years ago

LukeTOBrien commented 3 years ago

Bug description

When using Tippy inside a WebComponent and setting interactive to true, the tooltip remains open when mouse hover, but you cannot drag select the text or trigger click events from interactive content.

Reproduction

I have created a CodePen example

More info

I am creating a WebComponent library using LitElement for a project, so I am creating a tooltip component that using Tippy.

Is this an issue with the ShadowDOM?

LukeTOBrien commented 3 years ago

I have come up with a solution that works in my actual component but I cannot get to work in the CodePen example as of yet.
My solution is to set appendTo to this and I am using <slot>s which is why it is not working in the CodePen example, because I am not using a <slot>.

I will create another examplle when I have time... I will leave this issue open for your interest (if any)

kevinlandsberg commented 3 years ago

I have a similar problem but only i have added an event listener onto a button which is a template for my tippy. But when tippy js copies the html into the tippy-content, the event listener does not work anymore...there is no event triggered...is there asolution for this?

LukeTOBrien commented 3 years ago

Could you embed a code sample here or replicate it on CodePen?
I think my issue was the eveebt was being fired on the shadow root and not the actual tip.

I did end up finding a solutioon that worked for me, but I don't know if it will for others

kevinlandsberg commented 3 years ago

it works now, had to return whole template instead of template.innerHtml inside content func.

LukeTOBrien commented 3 years ago

Ahh, well done!
I will close this issue now.