Popover
A popover is a type of Dialog that is meant to provide additional context to content (an "anchor") currently on-screen. Typically, a popover is spawned by interacting with the content it enriches and is dismissed by clicking or shifting focus to an alternate location.
Alignment options for the popover are designed to mirror compass directions:
→ ←
NNW N NNE
↓ WNW ENE ↓
W ANCHOR E
↑ WSW ESE ↑
SSW S SSE
→ ←
The arrows indicate which way the popover will extend, e.g. → means the popover is aligned to the left edge and extends in that direction. Diagonal corners (NW, NE, SE, SW) are currently not supported.
<Popover
anchor={document.querySelector('.some-anchor-element')}
preset={Popover.preset.N}>
My popover content!
</Popover>
Installation
npm i boundless-popover --save
Then use it like:
/** @jsx createElement */
import { createElement, PureComponent } from 'react';
import ArrowKeyNavigation from 'boundless-arrow-key-navigation';
import Button from 'boundless-button';
import Popover from 'boundless-popover';
export default class PopoverDemo extends PureComponent {
state = {
words: [ {
word: 'transcendental',
syllabicRepresentation: 'tran·scen·den·tal',
type: 'adjective',
primaryDefinition: '',
secondaryDefinitions: [
'of or relating to a spiritual or nonphysical realm',
'(of a number, e.g., e or π) real but not a root of an algebraic equation with rational roots',
],
}, {
word: 'obstetrics',
syllabicRepresentation: 'ob·stet·rics',
type: 'noun',
preset: Popover.preset.N,
primaryDefinition: 'the branch of medicine and surgery concerned with childbirth and the care of women giving birth',
secondaryDefinitions: [],
}, {
word: 'olio',
syllabicRepresentation: 'o·li·o',
type: 'noun',
preset: Popover.preset.E,
primaryDefinition: [
<span key='1'>another term for </span>,
<a key='2' href='https://www.google.com/search?safe=active&espv=2&biw=1440&bih=74&q=define+olla+podrida&sa=X&ved=0CB8QgCswAGoVChMIlbiutZmDxwIVQx0-Ch1f-g9t'>olla podrida</a>,
],
secondaryDefinitions: [
'a miscellaneous collection of things',
'a variety act or show',
],
}, {
word: 'anastrophe',
syllabicRepresentation: 'a·nas·tro·phe',
type: 'noun',
preset: Popover.preset.W,
primaryDefinition: 'the inversion of the usual order of words or clauses',
secondaryDefinitions: [],
}, {
word: 'octothorp',
syllabicRepresentation: 'oc·to·thorp',
type: 'noun',
preset: Popover.preset.WNW,
primaryDefinition: 'another term for the pound sign (#)',
secondaryDefinitions: [],
} ],
}
handleKeyDown(index, event) {
if (event.key === 'Enter') {
this[this.state['showPopover' + index] ? 'showPopover' : 'hidePopover'](index, event);
}
}
openPopover(index) {
this.setState({ ['showPopover' + index]: true });
}
closePopover(index) {
this.setState({ ['showPopover' + index]: false });
}
renderSecondaryDefinitions(definitions = []) {
return definitions.length ? (
<ArrowKeyNavigation component='ol'>
{definitions.map((definition, index) => <li key={index}>{definition}</li>)}
</ArrowKeyNavigation>
) : null;
}
renderPrimaryDefinition(definition) {
return definition ? (<p>{definition}</p>) : null;
}
renderBody(definition) {
return (
<div>
<strong>{definition.syllabicRepresentation}</strong>
<br />
<em>{definition.type}</em>
{this.renderPrimaryDefinition(definition.primaryDefinition)}
{this.renderSecondaryDefinitions(definition.secondaryDefinitions)}
</div>
);
}
renderPopovers() {
return this.state.words.map((definition, index) => {
return this.state['showPopover' + index] ? (
<Popover
key={definition.word}
anchor={this.refs[`$word${index}`]}
caretAnchor={this.refs[`$word-caret-anchor${index}`]}
className='demo-popover'
closeOnOutsideFocus={true}
preset={definition.preset}
onClose={() => this.closePopover(index)}>
{this.renderBody(definition)}
</Popover>
) : undefined;
});
}
render() {
return (
<div>
<p>
Words of the day for {(new Date()).toLocaleDateString()}:<br />
<sub>Note that the words with ⓘ symbols have their caret anchored to the symbol, rather than the center of the button.</sub>
</p>
<div className='spread'>
{this.state.words.map((definition, index) => {
return (
<Button
key={definition.word}
ref={`$word${index}`}
className='show-help-popover'
onPressed={() => this.openPopover(index)}
pressed={this.state[`showPopover${index}`]}
tabIndex='0'>
{definition.word} {index % 2 === 0 ? <span ref={`$word-caret-anchor${index}`}>ⓘ</span> : null}
</Button>
);
})}
</div>
{this.renderPopovers()}
</div>
);
}
}
Popover can also just be directly used from the main Boundless library. This is recommended when you're getting started to avoid maintaining the package versions of several components:
npm i boundless --save
the ES6 import
statement then becomes like:
import { Popover } from 'boundless';
Props
Note: only top-level props are in the README, for the full list check out the website.
Required Props
-
anchor
· a DOM element or React reference (ref) to one for positioning purposesExpects Default Value HTMLElement or object
undefined
Optional Props
-
*
· any React-supported attributeExpects Default Value any
n/a
-
after
· arbitrary content to be rendered after the dialog in the DOMExpects Default Value any renderable
null
-
autoReposition
· if the given alignment settings would take the popover out of bounds, change the alignment as necessary to remain in the viewportExpects Default Value bool
true
-
before
· arbitrary content to be rendered before the dialog in the DOMExpects Default Value any renderable
null
-
captureFocus
· determines if focus is allowed to move away from the dialogExpects Default Value bool
true
-
caretAnchor
· a DOM element or React reference (ref) to one for positioning purposes, the caret component will be automatically positioned to center on this provided anchor; by default it will center onprops.anchor
Expects Default Value HTMLElement or object
undefined
-
caretComponent
· the JSX that is rendered and used to point at the middle of the anchor element and indicate the context of the popoverExpects Default Value ReactElement
<svg viewBox='0 0 14 9.5' xmlns='http://www.w3.org/2000/svg'> <g> <polygon className='b-popover-caret-border' fill='#000' points='7 0 14 10 0 10' /> <polygon className='b-popover-caret-fill' fill='#FFF' points='6.98230444 1.75 12.75 10 1.25 10' /> </g></svg>
-
closeOnEscKey
· enable detection of "Escape" keypresses to triggerprops.onClose
; if a function is provided, the return value determines if the dialog will be closedExpects Default Value bool or function
false
-
closeOnInsideClick
· enable detection of clicks inside the dialog area to triggerprops.onClose
; if a function is provided, the return value determines if the dialog will be closedExpects Default Value bool or function
false
-
closeOnOutsideClick
· enable detection of clicks outside the dialog area to triggerprops.onClose
; if a function is provided, the return value determines if the dialog will be closedExpects Default Value bool or function
false
-
closeOnOutsideFocus
· enable detection of focus outside the dialog area to triggerprops.onClose
; if a function is provided, the return value determines if the dialog will be closedExpects Default Value bool or function
false
-
closeOnOutsideScroll
· enable detection of scroll and mousewheel events outside the dialog area to triggerprops.onClose
; if a function is provided, the return value determines if the dialog will be closedExpects Default Value bool or function
false
-
component
· override the type of.b-dialog-wrapper
HTML elementExpects Default Value string
'div'
-
dialogComponent
· override the type of.b-dialog
HTML elementExpects Default Value string
'div'
-
dialogProps
Expects Default Value object
{}
-
onClose
· a custom event handler that is called to indicate that the dialog should be unrendered by its parent; the event occurs if one or more of the "closeOn" props (closeOnEscKey
,closeOnOutsideClick
, etc.) are passed astrue
and the dismissal criteria are satisfiedExpects Default Value function
() => {}
-
portalProps
Expects Default Value object
{}
-
preset
· example:<Popover anchor={document.querySelector('.some-anchor-element')} preset={Popover.preset.NNE}> My popover content! </Popover>
Expects Default Value Popover.preset.NNW or Popover.preset.N or Popover.preset.NNE or Popover.preset.ENE or Popover.preset.E or Popover.preset.ESE or Popover.preset.SSE or Popover.preset.S or Popover.preset.SSW or Popover.preset.WSW or Popover.preset.W or Popover.preset.WNW
Popover.preset.S
Reference Styles
Stylus
You can see what variables are available to override in variables.styl.
// Redefine any variables as desired, e.g:
color-accent = royalblue
// Bring in the component styles; they will be autoconfigured based on the above
@require "node_modules/boundless-popover/style"
CSS
If desired, a precompiled plain CSS stylesheet is available for customization at /build/style.css
, based on Boundless's default variables.