Menu
I'm following an example from official documentation to create a simple Popup: https://react.semantic-ui.com/modules/popup
So here is my current code which works very well:
export default (state, methods) => {
const { trigger, handleTooltipOpen, handleTooltipClose } = methods;
return (
<Popup className={ `tooltip ${ state.className }` } trigger={ trigger } open={ state.tooltipShown }
onOpen={ handleTooltipOpen } onClose={ handleTooltipClose }
on="hover" hideOnScroll>
<p>Popup Text</p>
</Popup>
);
};
But by default it appends the popup to the end of <body> (which is very confusing to me). Is there any way how to specify where exactly to append the popup, or some kind of inline option?
P.S. I've added a link to sandbox where you can replicate an issue - just open it in responsive mobile mode and click through.
336
The Popup component actually uses the Portal component to render it into a portal and another React tree. That means all of the props available on the Portal component are also available on a Popup. If you do not want your popup portal to mount on the <body> you can specify a mountNode prop on your Popup that will have it mount elsewhere.
178
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
