Default

With title

Popovers can be configured to have a title, this is displayed at the top opposite a close button.

With title & text button

As above, but with the close button displayed as text.

On the side

Attach to external element

Opened by an input

You can use a BpkInput enhanced with the withOpenEvents higher-order component to open popovers.

                                                
                                                import { createRef } from 'react';
                                                import BpkButton from '@skyscanner/backpack-web/bpk-component-button';
                                                import BpkPopover from '@skyscanner/backpack-web/bpk-component-popover';
                                                import BpkText from '@skyscanner/backpack-web/bpk-component-text';
                                                
                                                class App extends Component {
                                                  constructor() {
                                                    super();
                                                
                                                    this.ref = createRef();
                                                    this.state = {
                                                      isOpen: false,
                                                    };
                                                
                                                  }
                                                
                                                  openPopover = () => {
                                                    this.setState({
                                                      isOpen: true,
                                                    });
                                                  }
                                                
                                                  closePopover = () => {
                                                    this.setState({
                                                      isOpen: false,
                                                    });
                                                  }
                                                
                                                  const target = (
                                                    <div ref={this.ref} className={'my-popover-target'}>
                                                      <BpkButton
                                                        onClick={this.openPopover}>
                                                          Open
                                                      </BpkButton>
                                                    </div>
                                                  )
                                                
                                                  render() {
                                                    return (
                                                      <div id="popover-container">
                                                        <BpkPopover
                                                          id="my-popover"
                                                          target={target}
                                                          onClose={this.closePopover}
                                                          isOpen={this.state.isOpen}
                                                          label="My popover"
                                                          closeButtonText="Close"
                                                          renderTarget={() =>
                                                            document.getElementById('popover-container')
                                                          }
                                                          closeButtonProps={{
                                                            tabIndex: 0,
                                                          }}
                                                        >
                                                          <BpkText>My popover content</BpkText>
                                                        </BpkPopover>
                                                      </div>
                                                    );
                                                  }
                                                }

Props