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>

所以，当弹出窗口被触发并且我试图将鼠标悬停在popover上时，popover消失。我希望能够点击内部的弹出窗口，做一些内部的事情，当我将鼠标移出它时就消失了。

Answer 1

我设法使用ochi发布的评论之一来完成这项工作。

 <OverlayTrigger trigger={["hover"]} placement="bottom" overlay={(
    <Popover onMouseOver={this.showOverlay} onMouseOut={this.hideOverlay}>
        content
    </Popover>
 )}>
    <div onMouseOver={this.showOverlay} onMouseOut={this.hideOverlay}>
        <div>bla bla bla</div>
    </div>
 </OverlayTrigger>

在弹出窗口和div上添加触发器我想触发工作。

Answer 2

我希望使用React Bootstrap做同样的事情，除了使用工具提示而不是弹出窗口。这里的答案给了我一个很好的跳跃点，我将其与React Bootstrap文档中的Custom Overlay示例混合。

我将OverlayTrigger替换为自定义Overlay，其中包含Tooltip但在目标元素之外，而OverlayTrigger包装目标元素并调用{{ 1}}通过Tooltip道具。我在工具提示和目标元素中添加了overlay和onMouseEnter()来切换工具提示可见性状态，以便留下任何一个将关闭工具提示。

这是我的实施的一个简单版本：

onMouseLeave()

Answer 3

我做了一些处理这个用例的工作（从@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>

当悬停在它上面时，Popover不会隐藏

3 个答案: