MessagePopover

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

The MessagePopover component is a specialized version of a popover used for conveying state-based information (e.g. success, info, warning or error). Unlike MessageBox, this component is not intended to prevent the user’s interaction with the application.

Example

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

<ButtonToolbar muted>
    <MessagePopover
        message={<div>Here is a short message to show in a popover. See <a href='javascript:void(0)'>example</a>.</div>}
        placement='top'
        textClose='Close'
        title='Success'
        type='success'>
        <Button
            aria-label='Show Success Popover'
            className='btn-icon icon-messaging-success icon-size-lg'
            type='link' />
    </MessagePopover>
    <MessagePopover
        message={<div>Here is a short message to show in a popover. See <a href='javascript:void(0)'>example</a>.</div>}
        placement='top'
        textClose='Close'
        title='Info'
        type='info'>
        <Button
            aria-label='Show Info Popover'
            className='btn-icon icon-messaging-info icon-size-lg'
            type='link' />
    </MessagePopover>
    <MessagePopover
        message={<div>Here is a short message to show in a popover. See <a href='javascript:void(0)'>example</a>.</div>}
        placement='top'
        textClose='Close'
        title='Warning'
        type='warning'>
        <Button
            aria-label='Show Warning Popover'
            className='btn-icon icon-messaging-warning icon-size-lg'
            type='link' />
    </MessagePopover>
    <MessagePopover
        message={<div>Here is a short message to show in a popover. See <a href='javascript:void(0)'>example</a>.</div>}
        placement='top'
        textClose='Close'
        title='Error'
        type='error'>
        <Button
            aria-label='Show Error Popover'
            className='btn-icon icon-messaging-error icon-size-lg'
            type='link' />
    </MessagePopover>
</ButtonToolbar>

Usage

Properties

Property Type Default Description
children Node Required React component to which the popover will be attached.
message Node Required Collection of React components to be placed in popover’s content area.
textClose String Required Localized assistive text for the close button.
title String Required Popover heading text.
type String Required Popover type. Options are 'success', 'info', 'warning', 'error'.
id String Random value Used to build id attributes for accessibility reasons.
placement String 'right' Placement of the popover relative to the target element. Options are 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'.
show Boolean false Controls whether the popover is visible.

Callbacks

Property Parameters Description
onCloseClicked event 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.
onHide   Callback function fired when the popover is hidden (typically with a click outside of the popover).