Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to use with Portals?

See original GitHub issue

Broke my head trying to figure out how to use Tippy content in react portal… Something like this isn’t working:

<Tippy
      render={attrs => (
        <div {...attrs} onClick={() => setVisible(false)}>
          {ReactDOM.createPortal(
              props.content,
              document.getElementById("root-context-menu")!,
            )}
        </div>
      )}
...> button </Tippy>

because container with absolute positioning remains outside of portal. Wrapping Tippy into portal also won’t work because I don’t want button to be in the portal. Any hints? Thanks!

Issue Analytics

State:
Created 3 years ago
Comments:6 (1 by maintainers)

Top GitHub Comments

2reactions

mhsattariancommented, Jan 5, 2022

Hey, Sorry to open this issue again. I ran to the same issue using an interactive tippy. it doesn’t get appended to body by default. although I must say adding appendTo={document.body} solved it.

1reaction

pleerockcommented, May 4, 2020

<Tippy /> appends the content to the <body /> by default

hmm, it doesn’t… It appends into the place where its used in my case… That’s why I wanted to use portals - to prevent styles inheritance. What can I do wrong that leads to my use-case?

edit1: added a screenshot that shows its not in the body: