javascript - 将鼠标悬停在其上时，Popover 不会隐藏

Question

目前我有以下结构

<OverlayTrigger trigger={["hover", "focus", "click"]} placement="bottom" overlay={(
         <Popover className="timeline-popover-container" id="tpc-1">
             <TimelinePopover
                 alert={session}
                 previousAlert={prevSession}
                 nextAlert={nextSession}
                 status={status}
             />
         </Popover>
     )}>
         <div className="myclass">
             <div>{img}</div>
         </div>
     </OverlayTrigger>

因此，当弹出窗口被触发并且我尝试将鼠标悬停在弹出窗口上时，弹出窗口消失了。我希望能够在 de popover 内部单击，在其中执行操作，然后当我将鼠标移出它时消失。

Answer 1

我做了一个小组件来处理这个用例(灵感来自@AnnieP 的回答)。 https://gist.github.com/lou/571b7c0e7797860d6c555a9fdc0496f9

用法:

<PopoverStickOnHover
  component={<div>Holy guacamole! I'm Sticky.</div>}
  placement="top"
  onMouseEnter={() => { }}
  delay={200}
>
  <div>Show the sticky tooltip</div>
</PopoverStickOnHover>