定位react-bootstrap popover

我有幾個引導行。當用戶點擊任何行時，彈出窗口應該在行的中間處出現並顯示一些信息。但是，目前它在行結束之後很快就會彈出。定位react-bootstrap popover

這裏是我的JSBin鏈接顯示的代碼：https://jsbin.com/rogeyufuku/1/edit?css,js,output

我試圖通過如下positionLeft設定爲負值，以重新定位：

<ReactBootstrap.Popover className="my-popover" positionLeft={-300} positionTop={20} >

，但沒有奏效。

我也嘗試使用普通的舊CSS規則如下操作它：

.my-popover { position: relative; left: -200px; }

但也不能工作。

是否有任何想法渲染彈出覆蓋，因爲我渴望它？

（包括這裏所有的代碼以供參考，但JSBin鏈接工作）

編輯：這是現在的樣子：http://i.imgur.com/URuYthN.png 這是我希望它看起來像：http://i.imgur.com/M4Hh1wI.jpg

來源

2015-07-09 Methos

其有點難以看到你正在嘗試做什麼，但你不應該使用positionLeft和positionTop道具，它們將由Overlay組件設置

如果你想彈出窗口出現在中間，使用placement道具和值"top"，或"bottom"代替"right"

如果你想在哪裏以及它是如何定位你需要讓自己的自定義酥料餅的組件，做一些事情與在它經過的positionLeft和positionTop分量更細粒度的控制疊加組件

class MyPopover extends React.Component { 
    render(){ 
    var left = calculateMyOwnLeftPosition() 

    return (
     <ReactBootstrap.Popover {...this.props} positionLeft={left}> 
     { this.props.children } 
     </ReactBootstrap.Popover> 
    ) 
    } 
}

，然後你會使用它像：

<Overlay> 
    <MyPopover>sweet content</MyPopover> 
</Overlay>

來源

2015-07-10 19:30:41

對不起，不更清楚。基本上，我想渲染彈出窗口完全一樣，因爲它是目前呈現，除了而不是最右邊，我希望它在行的中間呈現正確。我使用了positionLeft，因爲它是在API中提供的。請檢查我的編輯以查看當前和期望的輸出。 – Methos

@Methos看到我的更新 –

使用酥料餅道具positionLeft和positionTop：

<Popover 
    id="popover-basic" 
    placement="right" 
    positionLeft={200} 
    positionTop={50} 
    title="Popover right" 
>

但是，如果你使用的OverlayTrigger的OverlayTrigger使用放置：

陣營，引導Popovers With OverlayTrigger：

const popoverTop = (
    <Popover id="popover-positioned-top" title="Popover top"> 
    <strong>Holy guacamole!</strong> Check this info. 
    </Popover> 
); 

<OverlayTrigger trigger="click" placement="top" overlay={popoverTop}> 
    <Button>Holy guacamole!</Button> 
</OverlayTrigger>

來源

2016-11-18 20:03:29

定位react-bootstrap popover

回答

相關問題