Popover
import Popover from '@concur/nui-widgets/lib/Popover/Popover';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. 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 base placements are supported: 'top', 'bottom', 'left', and 'right' (default). Each of the base placements can have an optional modifier that positions the pointer toward an edge of the popover. The modifiers are -start and -end and they can be appended to any of the base placements (e.g. top-start, left-end, etc.) The absense of a modifier will center the pointer along the edge it’s placed on. Use the placement property to set the placement.
<Row>
<Col className='text-center' xs={4}>
<Popover
message={<div>Here is a short message to show in a popover. See <a href='javascript:void(0)'>example</a>.</div>}
placement='bottom-start'
textClose='Close'
title='Bottom Start'>
<Button
aria-label='Show Bottom Start Popover'
className='btn-icon icon-arrow-3-s icon-size-lg'
type='link' />
</Popover>
</Col>
<Col className='text-center' xs={4}>
<Popover
message={<div>Here is a short message to show in a popover. See <a href='javascript:void(0)'>example</a>.</div>}
placement='bottom'
textClose='Close'
title='Bottom'>
<Button
aria-label='Show Bottom Popover'
className='btn-icon icon-arrow-3-s icon-size-lg'
type='link' />
</Popover>
</Col>
<Col className='text-center' xs={4}>
<Popover
message={<div>Here is a short message to show in a popover. See <a href='javascript:void(0)'>example</a>.</div>}
placement='bottom-end'
textClose='Close'
title='Bottom End'>
<Button
aria-label='Show Bottom End Popover'
className='btn-icon icon-arrow-3-s icon-size-lg'
type='link' />
</Popover>
</Col>
</Row>
<Row style={{ margin: '40px 0' }}>
<Col xs={6}>
<Popover
message={<div>Here is a short message to show in a popover. See <a href='javascript:void(0)'>example</a>.</div>}
placement='right-start'
textClose='Close'
title='Right Start'>
<Button
aria-label='Show Right Start Popover'
className='btn-icon icon-arrow-3-e icon-size-lg'
type='link' />
</Popover>
</Col>
<Col className='text-right' xs={6}>
<Popover
message={<div>Here is a short message to show in a popover. See <a href='javascript:void(0)'>example</a>.</div>}
placement='left-start'
textClose='Close'
title='Left Start'>
<Button
aria-label='Show Left Start Popover'
className='btn-icon icon-arrow-3-w icon-size-lg'
type='link' />
</Popover>
</Col>
</Row>
<Row style={{ margin: '40px 0' }}>
<Col xs={6}>
<Popover
message={<div>Here is a short message to show in a popover. See <a href='javascript:void(0)'>example</a>.</div>}
placement='right'
textClose='Close'
title='Right'>
<Button
aria-label='Show Right Popover'
className='btn-icon icon-arrow-3-e icon-size-lg'
type='link' />
</Popover>
</Col>
<Col className='text-right' xs={6}>
<Popover
message={<div>Here is a short message to show in a popover. See <a href='javascript:void(0)'>example</a>.</div>}
placement='left'
textClose='Close'
title='Left'>
<Button
aria-label='Show Left Popover'
className='btn-icon icon-arrow-3-w icon-size-lg'
type='link' />
</Popover>
</Col>
</Row>
<Row style={{ margin: '40px 0' }}>
<Col xs={6}>
<Popover
message={<div>Here is a short message to show in a popover. See <a href='javascript:void(0)'>example</a>.</div>}
placement='right-end'
textClose='Close'
title='Right End'>
<Button
aria-label='Show Right End Popover'
className='btn-icon icon-arrow-3-e icon-size-lg'
type='link' />
</Popover>
</Col>
<Col className='text-right' xs={6}>
<Popover
message={<div>Here is a short message to show in a popover. See <a href='javascript:void(0)'>example</a>.</div>}
placement='left-end'
textClose='Close'
title='Left End'>
<Button
aria-label='Show Left End Popover'
className='btn-icon icon-arrow-3-w icon-size-lg'
type='link' />
</Popover>
</Col>
</Row>
<Row>
<Col className='text-center' xs={4}>
<Popover
message={<div>Here is a short message to show in a popover. See <a href='javascript:void(0)'>example</a>.</div>}
placement='top-start'
textClose='Close'
title='Top Start'>
<Button
aria-label='Show Top Start Popover'
className='btn-icon icon-arrow-3-n icon-size-lg'
type='link' />
</Popover>
</Col>
<Col className='text-center' xs={4}>
<Popover
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='Top'>
<Button
aria-label='Show Top Popover'
className='btn-icon icon-arrow-3-n icon-size-lg'
type='link' />
</Popover>
</Col>
<Col className='text-center' xs={4}>
<Popover
message={<div>Here is a short message to show in a popover. See <a href='javascript:void(0)'>example</a>.</div>}
placement='top-end'
textClose='Close'
title='Top End'>
<Button
aria-label='Show Top End Popover'
className='btn-icon icon-arrow-3-n icon-size-lg'
type='link' />
</Popover>
</Col>
</Row>Custom Size
Use the width property to specify a custom width for the popover. When a custom width is used, the popover receives a maximum height and content within the popover will scroll, if necessary.
<Row>
<Col
md={1}
xs={2}>
<Popover
message={<SamplePopoverContent size='lg' />}
placement='bottom-start'
textClose='Close'
title='Notes'
width='60vw'>
<Button
aria-label='Show Bottom Popover'
className='btn-icon icon-arrow-3-s icon-size-lg'
type='link' />
</Popover>
</Col>
<Col
md={1}
xs={2}>
<Popover
message={<SamplePopoverContent size='lg' />}
placement='right'
textClose='Close'
title='Notes'
width='350px'>
<Button
aria-label='Show Right Popover'
className='btn-icon icon-arrow-3-e icon-size-lg'
type='link' />
</Popover>
</Col>
<Col
className='text-right'
md={1}
mdOffset={8}
xs={2}
xsOffset={4}>
<Popover
message={<SamplePopoverContent size='lg' />}
placement='left'
textClose='Close'
title='Notes'
width='50vw'>
<Button
aria-label='Show Left Popover'
className='btn-icon icon-arrow-3-w icon-size-lg'
type='link' />
</Popover>
</Col>
<Col
className='text-right'
md={1}
xs={2}>
<Popover
message={<SamplePopoverContent size='lg' />}
placement='top-end'
textClose='Close'
title='Notes'
width='400px'>
<Button
aria-label='Show Top Popover'
className='btn-icon icon-arrow-3-n icon-size-lg'
type='link' />
</Popover>
</Col>
</Row>Types
For state-based popovers, see MessagePopover.
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. |
className | String | Custom classes for the popover wrapper. | |
disableHideWhenTargetIsHidden | Boolean | Disable hiding the popover when the target element is scrolled past or otherwise hidden. | |
flipContainer | Element or Element[] | Used to create a boundary for the underlying Popper to stay within. | |
id | String | Random value | Used to build id attributes for accessibility reasons. |
placement | String or String[] | ['right', 'left', 'top', 'bottom'] | Placement of the popover relative to the target element. Options are 'auto', 'auto-start', 'auto-end', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'. If you use an array of strings, the first item in the array is the default placement and the following ones are chosen in order as fallback placements if the preceding ones don’t work. |
show | Boolean | false | Controls whether the popover is visible. |
width | String | The custom width of the popover. The value must specify the units as well as the value (e.g. 200px, 40vw or 30%). When a custom width is used, the popover receives a maximum height and content within the popover will scroll, if necessary. |
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). |