酥料餅不是隱藏它

目前，我有以下結構酥料餅不是隱藏它

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

所以，當酥料餅被觸發，我嘗試將鼠標懸停在酥料餅的酥料餅dissapear。我希望能夠點擊裏面的popover，做內部的東西，只是當我把鼠標移出它時消失。

來源

2017-07-18 Matheus Silva

你怎麼想觸發酥料餅？ - 如果從'trigger'列表中刪除'focus'和'click'會發生什麼？（即使觸發器列表如下所示：'trigger = {[「hover」]}'） – ochi

我想通過懸停或單擊元素來觸發彈出窗口。刪除並保持只是懸停不會改變任何東西。 –

我認爲你正在看什麼文檔稱之爲「click w/root close」（https://react-bootstrap.github.io/components.html#popovers-trigger-behaviors） - 不幸的是，你似乎必須選擇通過點擊觸發（並獲得所需的行爲）或懸停（一旦你mouseout一個元素，你不再徘徊它，所以如果這是觸發器顯示popover，那麼它也是隱藏它的觸發器） - 我做不要以爲你可以同時擁有（不用自己寫代碼） - 換句話說，你將不得不選擇 – ochi

我設法使用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>

在popover上添加觸發器，並在div上我想觸發工作。

來源

2017-07-21 14:02:19

我一直在尋找使用React Bootstrap來做同樣的事情，除了用工具提示而不是popover。這裏的答案給了我一個很好的起點，我在React Bootstrap文檔中混合了Custom Overlay示例。

我取代OverlayTrigger與自定義Overlay，它包裝的Tooltip但是目標元素以外，而OverlayTrigger包裹目標元素，並調用Tooltip通過overlay道具。我向工具提示和目標元素添加了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;

來源

2017-11-16 02:09:43 AnnieP

酥料餅不是隱藏它

回答

相關問題