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
show
boolean
false

Set the visibility of the Overlay

rootClose
boolean
false

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

onHide
function

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

animation
boolean | elementType
Fade

Use animation

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: 'top', 'right', 'bottom', 'left'
'right'

Sets the direction of the Overlay.