将鼠标悬停在其上时，它不会隐藏

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>

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

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示例混合在一起。

我用一个自定义的Overlay替换了OverlayTrigger ，它包装了Tooltip但在目标元素的外面，而OverlayTrigger包裹了目标元素并通过overlay OverlayTrigger调用了Tooltip 。 我在工具提示和目标元素中都添加了onMouseEnter()和onMouseLeave() ，以切换工具提示的可见性状态，以便任何一个都将关闭工具提示。

这是我的实现的基本版本：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Tooltip, Overlay } from 'react-bootstrap';

const TooltipExample extends Component {
  constructor(props) {
    super(props);

    this.state = {
      showTooltip: false,
    };
  }

  render() {
    let myTooltip = (
      <Tooltip 
        onMouseEnter={() => this.setState({ showTaskTooltip: true })}
        onMouseLeave={() => this.setState({ showTaskTooltip: false })}
      >
        I'm a tooltip and I'll stay open when you leave the target element and hover over me!
      </Tooltip>
    );

    return(
      <div>
        <h3
          ref="target"
          onMouseEnter={() => this.setState({ showTooltip: true })}
          onMouseLeave={() => this.setState({ showTooltip: false })}
        >
          Hover over me!
        </h3>

        <Overlay
          show={this.state.showTooltip}
          onHide={() => this.setState({ showTooltip: false })}
          placement="bottom"
          target={() => ReactDOM.findDOMNode(this.refs.target)}
        >
          {myTooltip}
        </Overlay>
      </div>
    );
  }  
}

export default TooltipExample;

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>