8

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.

Vytalyi
  • 1,351
  • 3
  • 17
  • 29

1 Answers1

4

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.

brianespinosa
  • 2,232
  • 10
  • 18
  • Good point, mountNode works good but now it doesn't calculate the position of popup properly... So I wasn't able to make it work. I've also updated my original question with a link to sandbox, so maybe I'm doing something wrong? – Vytalyi Jul 12 '18 at 08:22
  • Nope. You're not doing it wrong. Unfortunately, at present, `semantic-ui-react` does not have the ability to do inline popups in the markup. Is the default behavior of the popup not working for you, or are you only concerned with the semantics of the markup being generated in another React tree at the `` of the document? If I understand the problem it's causing you I can probably point you in the right direction to solve your issue. – brianespinosa Jul 12 '18 at 18:59
  • Thanks for response, all I want is to understand what exactly I need to change in my code to make it work. Inline tooltips is just an attempt to fix positioning issue. – Vytalyi Jul 13 '18 at 08:03
  • In your codepen example, the positioning of the tooltips is not working because of the CSS overrides are have in your index.html file. When you remove those overrides the position of your tooltips works, even in your portal example. If you still want to use those CSS overrides, you can... but the tooltips are not going to position correctly when they are children of an absolute positioned div. I'd recommend wrapping your Segment inside of a div with the absolute positioning you are looking for. Then you keep the relative positioning of the segment without overriding and it works. – brianespinosa Jul 13 '18 at 15:37