Skip to content

Added 'teleport' prop to allow teleporting popper#35

Open
CatSizeVoyage wants to merge 3 commits intovalgeirb:mainfrom
CatSizeVoyage:main
Open

Added 'teleport' prop to allow teleporting popper#35
CatSizeVoyage wants to merge 3 commits intovalgeirb:mainfrom
CatSizeVoyage:main

Conversation

@CatSizeVoyage
Copy link

Using the new teleport functionality to teleport the popper element to the selector specified. In my case I use it to teleport poppers to the bottom of the body, so that they always render above other elements and are not constrained by overflow: hidden parents of trigger elements.

Let me know what you think!

@CatSizeVoyage
Copy link
Author

Looks like this might need a bit more thought... It causes issues with hovering and interacting if the popper is not a child element.

@valgeirb valgeirb mentioned this pull request Oct 4, 2021
@valgeirb
Copy link
Owner

valgeirb commented Oct 4, 2021

Thanks a lot for putting time into this 👍

Maybe this should be the default behavior instead of messing around with z-index, what do you think?

@CatSizeVoyage
Copy link
Author

Potentially yeah. If the teleport prop was defaulted to 'body' then it can always be overridden to return to the inline behaviour. The one downside I've found to teleporting is that it can make it tricky to target the popper element with CSS... which is likely to be a breaking change for some.

@nbrylevv
Copy link

@CatSizeVoyage dude, there are some conflicts :(

@ruuskju
Copy link

ruuskju commented Feb 8, 2022

Hi, any updates on this one? Or have any decisions been made?
Would love to know if there is a change that this PR will make it to a release one day.
Thanks!!!

@valgeirb
Copy link
Owner

valgeirb commented Feb 8, 2022

Hi, any updates on this one? Or have any decisions been made?
Would love to know if there is a change that this PR will make it to a release one day.
Thanks!!!

It will, just been pretty busy with life - I'll find the time to focus on this soon 👍

@bperel
Copy link

bperel commented May 20, 2022

I have resolved the merge conflicts in this fork.

@ZsharE
Copy link

ZsharE commented Aug 1, 2022

I have resolved the merge conflicts in this fork.

I tried your version and works, but when i click inside of a popover content, it will close. This should close only if i click outside of it.

LE: I ended up by using vue-tippy@v6, whitch works great with Vue 3, and also have the teleport feature by default.

@rogeriotaques
Copy link

Wow! It has been a while since this PR was opened!
Any progress on the matter?

@RobbeR
Copy link

RobbeR commented Feb 6, 2025

Hi. Any progress?

@CharlesMariga
Copy link

I have resolved the merge conflicts in this fork.

I tried your version and works, but when i click inside of a popover content, it will close. This should close only if i click outside of it.

LE: I ended up by using vue-tippy@v6, whitch works great with Vue 3, and also have the teleport feature by default.

This saved my day!

@luisfrocha
Copy link

Also looking forward to this being merged.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

10 participants