Popover

import { Popover } from '@concur/nui-widgets';

Popovers are lightweight overlays meant to provide additional information and/or context to a specific element similar to Tooltip components. Unlike tooltips, however, popovers must be manually invoked and remain on the screen until dismissed by the user. Unlike MessageBox and Modal components, popovers are not intended to prevent the user’s interaction with the application.

Examples

Placement

Placement defines the position of popovers relative to the elements to which they are tied. Four placements are supported: 'top', 'bottom', 'left', and 'right' (default). Use the placement property to set the placement.

class HIGPopoverEx01 extends React.Component {
    constructor(props) {
        super(props);
        this._togglePopover = this._togglePopover.bind(this);
    }

    _togglePopover(name, show) {
        this.setState({[name]: show});
    }

    render() {
        return (
            <div>
                <div className='text-center'>
                    <Button
                        onClick={this._togglePopover.bind(this, 'bottom', true)}
                        ref='bottom'>
                        Bottom
                    </Button>
                </div>

                <ButtonToolbar muted style={{margin: '50px 0'}}>
                    <Button
                        onClick={this._togglePopover.bind(this, 'right', true)}
                        ref='right'>
                        Right
                    </Button>
                    <Button
                        className='pull-right'
                        onClick={this._togglePopover.bind(this, 'left', true)}
                        ref='left'>
                        Left
                    </Button>
                </ButtonToolbar>

                <div className='text-center'>
                    <Button
                        onClick={this._togglePopover.bind(this, 'top', true)}
                        ref='top'>
                        Top
                    </Button>
                </div>

                <Popover
                    childId='top'
                    onHide={this._togglePopover.bind(this, 'top', false)}
                    placement='top'
                    show={this.state && this.state.top}
                    targetRef={this.refs.top}
                    title='Top'>
                    Here is a short message to show in a popover.
                </Popover>
                <Popover
                    childId='right'
                    onHide={this._togglePopover.bind(this, 'right', false)}
                    placement='right'
                    show={this.state && this.state.right}
                    targetRef={this.refs.right}
                    title='Right'>
                    Here is a short message to show in a popover.
                </Popover>
                <Popover
                    childId='bottom'
                    onHide={this._togglePopover.bind(this, 'bottom', false)}
                    placement='bottom'
                    show={this.state && this.state.bottom}
                    targetRef={this.refs.bottom}
                    title='Bottom'>
                    Here is a short message to show in a popover.
                </Popover>
                <Popover
                    childId='left'
                    onHide={this._togglePopover.bind(this, 'left', false)}
                    placement='left'
                    show={this.state && this.state.left}
                    targetRef={this.refs.left}
                    title='Left'>
                    Here is a short message to show in a popover.
                </Popover>
            </div>
        );
    }
}

Types

There are four supported types (states) of popovers: 'success', 'info' (default), 'warning' and 'error'. Use the type property to set the type.

class HIGPopoverEx02 extends React.Component {
    constructor(props) {
        super(props);
        this._togglePopover = this._togglePopover.bind(this);
    }

    _togglePopover(name, show) {
        this.setState({[name]: show});
    }

    render() {
        return (
            <div style={{margin: '120px 100px 0'}}>
                <ButtonToolbar muted>
                    <Button
                        onClick={this._togglePopover.bind(this, 'success', true)}
                        ref='success'
                        type='success'>
                        Success
                    </Button>
                    <Button
                        onClick={this._togglePopover.bind(this, 'info', true)}
                        ref='info'
                        type='info'>
                        Info
                    </Button>
                    <Button
                        onClick={this._togglePopover.bind(this, 'warning', true)}
                        ref='warning'
                        type='warning'>
                        Warning
                    </Button>
                    <Button
                        onClick={this._togglePopover.bind(this, 'error', true)}
                        ref='error'
                        type='danger'>
                        Error
                    </Button>
                </ButtonToolbar>

                <Popover
                    childId='success'
                    onHide={this._togglePopover.bind(this, 'success', false)}
                    placement='top'
                    show={this.state && this.state.success}
                    targetRef={this.refs.success}
                    title='Success'
                    type='success'>
                    Here is a short message to show in a popover.
                </Popover>
                <Popover
                    childId='info'
                    onHide={this._togglePopover.bind(this, 'info', false)}
                    placement='top'
                    show={this.state && this.state.info}
                    targetRef={this.refs.info}
                    title='Info'
                    type='info'>
                    Here is a short message to show in a popover.
                </Popover>
                <Popover
                    childId='warning'
                    onHide={this._togglePopover.bind(this, 'warning', false)}
                    placement='top'
                    show={this.state && this.state.warning}
                    targetRef={this.refs.warning}
                    title='Warning'
                    type='warning'>
                    Here is a short message to show in a popover.
                </Popover>
                <Popover
                    childId='error'
                    onHide={this._togglePopover.bind(this, 'error', false)}
                    placement='top'
                    show={this.state && this.state.error}
                    targetRef={this.refs.error}
                    title='Error'
                    type='error'>
                    Here is a short message to show in a popover.
                </Popover>
            </div>
        );
    }
}

Usage

Properties

Property Type Default Description
childId String Required id attribute of the popover’s outer <div> tag. Required for accessibility reasons.
children Node   Collection of React components to be placed in popover’s content area.
container Object document.body HTML DOM node from which the overlay cannot “escape”.
placement String 'right' Placement of the popover relative to the targetRef element. Options are 'top', 'bottom', 'left', 'right'.
show Boolean false Controls whether the popover is visible.
targetRef Object   Name of the ref to which the popover will be anchored and to which it points.
title String   Popover heading text.
type String 'info' Popover type. Options are 'success', 'info', 'warning', 'error'.

Callbacks

Property Parameters Description
onCloseClicked   Callback function fired when the close button is clicked. If this is not passed, an attempt will be made to fire the onHide function instead. NOTE: Either this property or the onHide property is required or the popover cannot be dismissed.
onHide   Callback function fired when the popover is hidden (typically with a click outside of the popover). If this is not passed, an attempt will be made to fire the onCloseClicked function instead. NOTE: Either this property or the onCloseClicked property is required or the popover cannot be dismissed.