弹出窗口显示在左上角，因为 div 的宽度非常小，如 < 2.5 px

Question

我在我的 react js 代码中使用了 reactstrap popover。弹出窗口显示在左上角，因为 div 的宽度几乎小于 2.5px

我使用的是下面提到的版本 "reactstrap": "^7.0.1", "react": "^16.3.2",

<Popover placement="bottom" style={{ backgroundColor: 'lightgrey',  textAlign: 'left', width: '235px' }} isOpen={this.props.popoverVisible} target={this.props.target}>
                    <PopoverBody>
                        <div>
                            {this.getPopOverName(this.props.item)}
                            <div><b>Start: </b>{this.dateObject.start}</div>
                            <div><b>End: </b>{this.dateObject.end}</div>
                        </div>
                    </PopoverBody>
                </Popover>

![在此处输入图片描述[1]][1]

Answer 1

来自your stackblitz in the comments, remove the border-style:solid; property from your styles.css to get the same result as I had suggested here

相关JS:

class MyPopOver extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      popoverOpen: false
    };
  }

  onHover = () => {
  this.setState({
    popoverOpen: true,
  })
}

onHoverLeave = () => {
  this.setState({
    popoverOpen: false,
  })
}

  render() {
    return (<>
      <div className='tinyDiv' id="Popover1" onMouseEnter={this.onHover}
   onMouseLeave={this.onHoverLeave}>
        <Popover placement="bottom" isOpen={this.state.popoverOpen} target="Popover1" style={{ backgroundColor: 'lightgrey'}}>
          <PopoverBody>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</PopoverBody>
        </Popover>
      </div></>
    )
  }
}

弹出窗口显示在左上角，因为 div 的宽度非常小，如 < 2.5 px

popover is showing at top left corner as the width of the div is very small like < 2.5 px

css

reactjs

reactstrap