# Popovers Popover

The Popover, offers a more robust alternative to the Tooltip for displaying overlays of content.


          const popoverInstance = (
            <div style={{ height: 120 }}>
              <Popover id='popover-right-0' placement="right" positionLeft={200} positionTop={50} title="Popover right">
                And here's some <strong>amazing</strong> content. It's very engaging. right?
              </Popover>
            </div>
          );

          
        

# With OverlayTrigger

The Popover component, like the Tooltip can be used with an OverlayTrigger Component, and positioned around it.


          const positionerInstance = (
            <ButtonToolbar>
              <OverlayTrigger trigger="click" placement="left" overlay={<Popover id='popover-left-0' title="Popover left"><strong>Holy guacamole!</strong> Check this info.</Popover>}>
                <Button bsStyle="default">Holy guacamole!</Button>
              </OverlayTrigger>
              <OverlayTrigger trigger="click" placement="top" overlay={<Popover id='popover-top-0' title="Popover top"><strong>Holy guacamole!</strong> Check this info.</Popover>}>
                <Button bsStyle="default">Holy guacamole!</Button>
              </OverlayTrigger>
              <OverlayTrigger trigger="click" placement="bottom" overlay={<Popover id='popover-bottom-0' title="Popover bottom"><strong>Holy guacamole!</strong> Check this info.</Popover>}>
                <Button bsStyle="default">Holy guacamole!</Button>
              </OverlayTrigger>
              <OverlayTrigger trigger="click" placement="right" overlay={<Popover id='popover-right-1' title="Popover right"><strong>Holy guacamole!</strong> Check this info.</Popover>}>
                <Button bsStyle="default">Holy guacamole!</Button>
              </OverlayTrigger>
            </ButtonToolbar>
          );

          
        

# Trigger behaviors

It's inadvisable to use "hover" or "focus" triggers for popovers, because they have poor accessibility from keyboard and on mobile devices.


          const positionerInstance = (
            <ButtonToolbar>
              <OverlayTrigger trigger="click" placement="bottom" overlay={<Popover id='popover-bottom-1' title="Popover bottom"><strong>Holy guacamole!</strong> Check this info.</Popover>}>
                <Button bsStyle="default">Click</Button>
              </OverlayTrigger>
              <OverlayTrigger trigger={["hover", "focus"]} placement="bottom" overlay={<Popover id='popover-bottom-2' title="Popover bottom"><strong>Holy guacamole!</strong> Check this info.</Popover>}>
                <Button bsStyle="default">Hover</Button>
              </OverlayTrigger>
              <OverlayTrigger trigger="focus" placement="bottom" overlay={<Popover id='popover-bottom-3' title="Popover bottom"><strong>Holy guacamole!</strong> Check this info.</Popover>}>
                <Button bsStyle="default">Focus</Button>
              </OverlayTrigger>
              <OverlayTrigger trigger="click" rootClose placement="bottom" overlay={<Popover id='popover-bottom-4' title="Popover bottom"><strong>Holy guacamole!</strong> Check this info.</Popover>}>
                <Button bsStyle="default">Click + rootClose</Button>
              </OverlayTrigger>
            </ButtonToolbar>
          );

          
        

# Popover component in container


          class Example extends React.Component {
            constructor(...args) {
              super(...args);
              this.state = { show: false };
            }
            render() {
              return (
                <ButtonToolbar>
                  <Button
                    bsStyle="default"
                    onClick={e => this.setState({ target: e.target, show: !this.state.show })}
                  >
                    Holy guacamole!
                  </Button>

                  <Overlay
                    show={this.state.show}
                    target={()=> ReactDOM.findDOMNode(this.state.target)}
                    placement="bottom"
                    container={this}
                    containerPadding={20}
                  >
                    <Popover id='popover-bottom-5' title="Popover bottom">
                      <strong>Holy guacamole!</strong> Check this info.
                    </Popover>
                  </Overlay>
                </ButtonToolbar>
              );
            }
          }

          
        

# Positioned popover components in scrolling container


          class Positioner extends React.Component {
            render() {
              return (
                <ButtonToolbar style={{padding: '100px 0'}}>
                  <OverlayTrigger container={this} trigger="click" placement="left" overlay={<Popover id='popover-left-1' title="Popover left"><strong>Holy guacamole!</strong> Check this info.</Popover>}>
                    <Button bsStyle="default">Holy guacamole!</Button>
                  </OverlayTrigger>
                  <OverlayTrigger container={this} trigger="click" placement="top" overlay={<Popover id='popover-top-1' title="Popover top"><strong>Holy guacamole!</strong> Check this info.</Popover>}>
                    <Button bsStyle="default">Holy guacamole!</Button>
                  </OverlayTrigger>
                  <OverlayTrigger container={this} trigger="click" placement="bottom" overlay={<Popover id='popover-bottom-6' title="Popover bottom"><strong>Holy guacamole!</strong> Check this info.</Popover>}>
                    <Button bsStyle="default">Holy guacamole!</Button>
                  </OverlayTrigger>
                  <OverlayTrigger container={this} trigger="click" placement="right" overlay={<Popover id='popover-right-2' title="Popover right"><strong>Holy guacamole!</strong> Check this info.</Popover>}>
                    <Button bsStyle="default">Holy guacamole!</Button>
                  </OverlayTrigger>
                </ButtonToolbar>
              );
            }
          }

          
        

# Props

NameTypeDefaultDescription
arrowOffsetLeftnumber | stringThe "left" position value for the Popover arrow.
arrowOffsetTopnumber | stringThe "top" position value for the Popover arrow.
id requiredstringAn html id attribute, necessary for accessibility
placementone of: 'top', 'right', 'bottom', 'left''right'Sets the direction the Popover is positioned towards.
positionLeftnumberThe "left" position value for the Popover.
positionTopnumberThe "top" position value for the Popover.
titlenodeTitle text