popman
Unopinionated and unstyled popover component for React. View example.
Benefits
- Unopinionated
- Unstyled
- Simple API
- Automatic positioning
- Renders popovers on page body, so it works inside containers with
overflow: hidden
Installation
npm install popman
Usage
Example
const Popover = <Popover open around=<div>Hello</div>> Hello i am the popover content</Popover>
More examples can be found in the examples directory.
props
bool
)
open (Show/hide the popover.
string
)
className (Custom base class name for your popover. Defaults to Popman
. popman adds the following css class to the container of the popover (Popman
is replaced by your own className
if you specified it):
.Popman
.Popman--position-${y}-${x}
(.Popman--position-top-left
|.Popman--position-top-right
|.Popman--position-top-center
|.Popman--position-bottom-left
|.Popman--position-bottom-right
|.Popman--position-bottom-center
|.Popman--position-center-left
|.Popman--position-center-right
|.Popman--position-center-center
)
node
)
children (The content of the popover.
node
)
around (The React component against which the popover is positioned.
{ y: 'top'|'bottom'|'center', x: 'left'|'right'|'center' }
)
position (Manually set the position of the popover.
constrainTo: 'scrollParent'
Make sure the tooltip stays within the bounds of its scroll parent. To constrain x
and y
, set constrainX (bool)
and constrainY (bool)
props.
Styling
To give your popovers padding, a white background and a box shadow. Also give some spacing to the anchor element (margin
).