A non-blocking container positioned to a specific anchor element.
npm install boundless-popoverTHIS IS AN AUTOGENERATED FILE. EDIT INDEX.JS INSTEAD.
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.
`jsx`
preset={Popover.preset.N}>
My popover content!
_Note: only top-level props are in the README, for the full list check out the website._
| Name | Type | Default Value | Description |
|---|---|---|---|
| anchor | | | a DOM element or React reference (ref) to one for positioning purposes |
| Name | Type | Default Value | Description |
|---|---|---|---|
| after | | | arbitrary content to be rendered after the dialog in the DOM |
| autoReposition | | | if the given alignment settings would take the popover out of bounds, change the alignment as necessary to remain in the viewport |
| before | | | arbitrary content to be rendered before the dialog in the DOM |
| bodyProps | | | any React-supported attribute; applied to the .b-dialog-body node |
| captureFocus | | | determines if focus is allowed to move away from the dialog |
| 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 on props.anchor |
| caretComponent | | | the JSX that is rendered and used to point at the middle of the anchor element and indicate the context of the popover |
| children | | | |
| closeOnEscKey | | | enable detection of "Escape" keypresses to trigger props.onClose; if a function is provided, the return |
| closeOnInsideClick | | | enable detection of clicks inside the dialog area to trigger props.onClose; if a function is provided, the return |
| closeOnOutsideClick | | | enable detection of clicks outside the dialog area to trigger props.onClose; if a function is provided, the return |
| closeOnOutsideFocus | | | enable detection of focus outside the dialog area to trigger props.onClose; if a function is provided, the return |
| closeOnOutsideScroll | | | enable detection of scroll and mousewheel events outside the dialog area to trigger props.onClose; if a functio |
| footer | | | text, ReactElements, etc. comprising the "footer" area of the dialog, e.g. confirm/cancel buttons |
| footerProps | | | any React-supported attribute; applied to the .b-dialog-footer node |
| header | | | text, ReactElements, etc. to represent the "title bar" area of the dialog |
| headerProps | | | any React-supported attribute; applied to the .b-dialog-header node |
| 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 as true and the dismissal criteria are satisfied |
| portalProps | | | |
| preset | | | `jsx` |
| wrapperProps | | | any React-supported attribute; applied to the .b-dialog-wrapper` node |