semantic-ui-react – React Semantic UI中的内联弹出/工具提示

发布时间：2020-12-15 20:44:14 所属栏目：百科来源：网络整理

导读：我正在按照官方文档中的示例创建一个简单的Popup： https://react.semantic-ui.com/modules/popup 所以这是我目前的代码非常有效： export default (state,methods) = { const { trigger,handleTooltipOpen,handleTooltipClose } = methods; return ( Popup

我正在按照官方文档中的示例创建一个简单的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>的末尾. (这对我来说很混乱).有没有办法如何指定准确附加弹出窗口或某种内联选项的位置？

附：我添加了一个link to sandbox,您可以在其中复制问题 – 只需在响应式移动模式下打开它并点击即可.

Popup组件实际上使用Portal组件将其呈现为门户和另一个React树.这意味着 all of the props available on the Portal component也可以在Popup上使用.如果您不希望弹出式门户挂载在< body>上你可以在Popup上指定一个mountNode prop,它将把它挂载到别处.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!