atomiks/tippyjs-react

'interactive: true' cutt of and faq solution not working

nataliarossini opened this issue · 2 comments

I'm using next.js for this app and I made a tippy interactive on the navbar, it worked very well. However, I'm trying to do exactly the same but in this component which is a menu for mobile and when I try to make it interactive, it goes all over the place. I read the documentation but popperOptions haven't changed anything and appendTo: document.body do not work well with next.js

here's without interactive: true
Screenshot 2021-10-29 at 16 17 07

and here's what happens with interactive
Screenshot 2021-10-29 at 16 18 08

I'd really appreciate any help, thank you!

appendTo: () => document.body is the default for non-interactive tippys so that should work correctly, assuming you're implementing some focus management for a11y.

Thanks a lot