Viewport Boundary Detection

The Popup enables you to set its boundary detection functionality by using the collision property.

The property specifies the behavior of the component when it does not fit in the view port. By default, the Popup fits horizontally and flips vertically.

<style>
    .popup-content {
        color: #787878;
        background-color: #fcf7f8;
        border: 1px solid rgba(0,0,0,.05);
        padding: 30px;
    }

    .anchor {
        position: absolute;
        top: 150px;
        left: 50px;
    }
</style>
class AppComponent extends React.Component {
    anchor = null;

    constructor(props) {
        super(props);

        this.state = { show: false };
    }

    onClick = () => {
        this.setState({
            show: !this.state.show
        });
    }

    render() {
        return (
            <div>
                <button
                    className="anchor k-button"
                    onClick={this.onClick}
                    ref={(button) => { this.anchor = button; }}
                >
                    Toggle
                </button>
                <Popup
                    anchor={this.anchor}
                    collision={{
                        horizontal: "fit",
                        vertical: "flip"
                    }}
                    show={this.state.show}
                    popupClass={'popup-content'}
                >
                    Popup content.
                </Popup>
            </div>
        );
    }
}

ReactDOM.render(
  <AppComponent />,
  document.querySelector('my-app')
);
In this article
 /