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

Question

I was using reactstrap popover in my react js code . Popover is showing at topleft corner as the width of the div is almost less than 2.5px

I was using versions mentioned below "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>

![enter image description here[1]][1]

Answer 1

From 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

relevant CSS:

.tinyDiv{
  background:red; height:10px; width:3px; margin-left:10%;
  /* border-style:solid; */
  border-width:2px;
  border-color:blue;
}

relevant 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></>
    )
  }
}