Currently i have the following structure

<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>

So, when the popover is triggered and i try to hover over the popover, the popover dissapear. I want to be able to click inside de popover, do things inside of that and just dissapear when i move the mouse out of it.

Currently i have the following structure

<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>

So, when the popover is triggered and i try to hover over the popover, the popover dissapear. I want to be able to click inside de popover, do things inside of that and just dissapear when i move the mouse out of it.

• javascript
• twitter-bootstrap-3
• react-bootstrap

• how do you want to trigger the popover? - what happens if you remove focus and click from the trigger list? (i.e. make the trigger list look like this instead: trigger={["hover"]} ) – blurfus Commented Jul 18, 2017 at 20:52
• I want the popover to be triggered by hover, or clicking on the element. Removing that and keeping just hover does not change anything. – PlayMa256 Commented Jul 18, 2017 at 21:59
• I think you are looking at what docs call "click w/root close" (react-bootstrap.github.io/…) - unfortunately, it seems like you have to choose between triggering by click (and get the desired behaviour) or hover (once you mouseout of an element you are no longer hovering it so if this is the trigger for showing the popover, then it is also the trigger for hiding it) - I do not think you'll be able to have both (w/o writing the code yourself) - In other words, you will have to choose – blurfus Commented Jul 18, 2017 at 22:22
• Alright @ochi thanks. Do you know any other option that me allow to do that? – PlayMa256 Commented Jul 18, 2017 at 22:35
• What do you mean? I think you can either write the code yourself (I wouldn't know where to start) or use 'click w/rootClose' as the trigger (if you choose this, see my answer) – blurfus Commented Jul 18, 2017 at 22:43

3 Answers 3

I did a little ponent to handle this use case (inspired from the answer by @AnnieP). https://gist.github./lou/571b7c0e7797860d6c555a9fdc0496f9

Usage:

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

I manage to make that work using one of the ments that ochi posted.

 <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>

adding trigger on the popover and on the div i want to trigger worked.

I was looking to do the same thing using React Bootstrap except with a tooltip instead of a popover. The answer here gave me a good jumping off point, which I mixed with the Custom Overlay example in the React Bootstrap docs.

I replaced OverlayTrigger with a custom Overlay, which wraps the Tooltip but is outside of the target element, whereas the OverlayTrigger wraps the target element and calls Tooltip through the overlay prop. I added onMouseEnter() and onMouseLeave() to both the tooltip and the target element to toggle the tooltip visibility state so that leaving either one will close the tooltip.

This is a bare-bones version of my implementation:

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;