Components

#Custom overlays Overlay

The OverlayTrigger component is great for most use cases, but as a higher level abstraction it can lack the flexibility needed to build more nuanced or custom behaviors into your Overlay components. For these cases it can be helpful to forgo the trigger and use the Overlay component directly.

class Example extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.getTarget = this.getTarget.bind(this);
    this.handleToggle = this.handleToggle.bind(this);

    this.state = {
      show: true
    };
  }

  getTarget() {
    return ReactDOM.findDOMNode(this.target);
  }

  handleToggle() {
    this.setState({ show: !this.state.show });
  }

  render() {
    const sharedProps = {
      container: this,
      target: this.getTarget,
      show: this.state.show
    };

    return (
      <div style={{ height: 100, paddingLeft: 150, position: 'relative' }}>
        <Button
          ref={button => {
            this.target = button;
          }}
          onClick={this.handleToggle}
        >
          Click me!
        </Button>

        <Overlay {...sharedProps} placement="left">
          <Tooltip id="overload-left">Tooltip overload!</Tooltip>
        </Overlay>
        <Overlay {...sharedProps} placement="top">
          <Tooltip id="overload-top">Tooltip overload!</Tooltip>
        </Overlay>
        <Overlay {...sharedProps} placement="right">
          <Tooltip id="overload-right">Tooltip overload!</Tooltip>
        </Overlay>
        <Overlay {...sharedProps} placement="bottom">
          <Tooltip id="overload-bottom">Tooltip overload!</Tooltip>
        </Overlay>
      </div>
    );
  }
}

render(<Example />);

#Use Overlay instead of Tooltip and Popover

You don't need to use the provided Tooltip or Popover components. Creating custom overlays is as easy as wrapping some markup in an Overlay component. Make sure to pass down the className and style props to the wrapped element to make positioning and transitions work.

function CustomPopover({ className, style }) {
  return (
    <div
      className={className}
      style={{
        ...style,
        position: 'absolute',
        backgroundColor: '#EEE',
        boxShadow: '0 5px 10px rgba(0, 0, 0, 0.2)',
        border: '1px solid #CCC',
        borderRadius: 3,
        marginLeft: -5,
        marginTop: 5,
        padding: 10
      }}
    >
      <strong>Holy guacamole!</strong> Check this info.
    </div>
  );
}

class Example extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.handleToggle = this.handleToggle.bind(this);

    this.state = {
      show: true
    };
  }

  handleToggle() {
    this.setState({ show: !this.state.show });
  }

  render() {
    return (
      <div style={{ height: 100, position: 'relative' }}>
        <Button
          ref={button => {
            this.target = button;
          }}
          onClick={this.handleToggle}
        >
          I am an Overlay target
        </Button>

        <Overlay
          show={this.state.show}
          onHide={() => this.setState({ show: false })}
          placement="right"
          container={this}
          target={() => ReactDOM.findDOMNode(this.target)}
        >
          <CustomPopover />
        </Overlay>
      </div>
    );
  }
}

render(<Example />);

#Props[source]

NameTypeDefaultDescription
container
componentOrElement | function

A component instance, DOM node, or function that returns either. The container element will have the Overlay appended to it via a React portal.

target
componentOrElement | function

A component instance, DOM node, or function that returns either. The overlay will be positioned in relation to the target

show
boolean
false

Set the visibility of the Overlay

popperConfig
object

A set of popper options and props passed directly to react-popper's Popper component.

rootClose
boolean
false

Specify whether the overlay should trigger onHide when the user clicks outside the overlay

rootCloseEvent
one of: 'click', 'mousedown'

Specify event for triggering a "root close" toggle.

onHide
function

A callback invoked by the overlay when it wishes to be hidden. Required if rootClose is specified.

transition
boolean | elementType
Fade

Animate the entering and exiting of the Ovelay. true will use the <Fade> transition, or a custom react-transition-group <Transition> component can be provided.

onEnter
function

Callback fired before the Overlay transitions in

onEntering
function

Callback fired as the Overlay begins to transition in

onEntered
function

Callback fired after the Overlay finishes transitioning in

onExit
function

Callback fired right before the Overlay transitions out

onExiting
function

Callback fired as the Overlay begins to transition out

onExited
function

Callback fired after the Overlay finishes transitioning out

placement
one of: 'auto-start', 'auto', 'auto-end', 'top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-end', 'bottom', 'bottom-start', 'left-end', 'left', 'left-start'
'right'

The placement of the Overlay in relation to its target.