當點擊頁面上任何地方時禁用重疊

Question

我有一個工具提示，我點擊時顯示和隱藏。我想隱藏當用戶點擊頁面上的任何地方的時的工具提示。我怎樣才能做到這一點？

fiddle

var Alert = ReactBootstrap.Alert; 
var Overlay = ReactBootstrap.Overlay; 
var Tooltip = ReactBootstrap.Tooltip; 
var Button = ReactBootstrap.Button; 

const Example = React.createClass({ 
    getInitialState() { 
    return { show: true }; 
    }, 

    toggle() { 
    this.setState({ show: !this.state.show }); 
    }, 

    render() { 
    const tooltip = <Tooltip>Tooltip overload!</Tooltip>; 

    const sharedProps = { 
     show: this.state.show, 
     container: this, 
     target:() => this.refs.target.getDOMNode() 
    }; 

    return (
     <div style={{ height: 100, paddingLeft: 150, position: 'relative' }}> 
     <Button ref="target" onClick={this.toggle}> 
      Click me! 
     </Button> 

     <div> 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum 
     </div> 

     <Overlay {...sharedProps} placement="left"> 
      { tooltip } 
     </Overlay> 
     </div> 
    ); 
    } 
}); 


React.render(<Example/>, document.getElementById('container')); 

Answer 1

你有兩個道具傳遞給您的疊加組件實現這一目標，rootClose={true}和onHide={() => this.setState({show: false})}

它應該是這樣的

<Overlay rootClose={true} onHide={() => this.setState({show: false})} {...sharedProps} placement="left"> 
      { tooltip } 
     </Overlay> 

full working example