Question

我正在按照官方文档中的示例创建一个简单的Popup：https://react.semantic-ui.com/modules/popup

这是我当前的代码，效果很好：

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>
  );
};

但是默认情况下，它将弹出窗口附加到<body>的末尾（这对我来说很混乱）。有什么方法可以指定弹出窗口的确切位置或某种inline选项？

P.S。我添加了一个link to sandbox，您可以在其中复制问题-只需在自适应移动模式下打开它并单击即可。

Answer 1

Popup组件实际上使用Portal组件将其呈现到门户和另一个React树中。这意味着Popup上也可以使用all of the props available on the Portal component。如果您不希望将弹出门户安装在<body>上，则可以在mountNode上指定一个Popup道具，将其安装在其他地方。

React Semantic UI的内联弹出式窗口/工具提示

1 个答案: