定位react-bootstrap popover

Question

我有几行 bootstrap。当用户单击任何行时，弹出窗口应出现在行的中间并显示一些信息。然而，目前它弹出最右边，在行结束之后。

这是我的 JSBin link 显示代码：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 link 正在运行）

编辑：这是现在的样子：http://i.imgur.com/URuYthN.png 这是我想要的样子：http://i.imgur.com/M4Hh1wI.jpg

Answer 1

很难看出你在做什么，但你不应该使用 positionLeft 和 positionTop 属性，它们将由 Overlay 组件设置

如果您希望弹出窗口出现在中间，请使用 placement 属性和值 "top"，或者 "bottom" 而不是 "right"

如果你想更细粒度地控制它的位置和方式，你需要制作你自己的自定义 Popover 组件，该组件对 Overlay 组件传递给它的 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>

Answer 2

使用Popover道具positionLeft和positionTop:

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

但是，如果您使用的是 OverlayTrigger，请在 OverlayTrigger 上使用 placement：

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

定位react-bootstrap popover

Positioning react-bootstrap popover

reactjs

react-bootstrap