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.