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 = require('popman')
 
<Popover open around={<div>Hello</div>}>
  Hello, i am the popover content
</Popover>

More examples can be found in the examples directory.

props

open (bool)

Show/hide the popover.

className (string)

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)

children (node)

The content of the popover.

around (node)

The React component against which the popover is positioned.

position ({ y: 'top'|'bottom'|'center', x: 'left'|'right'|'center' })

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).

.Popover {
  padding: .25rem .5rem;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .2);
  background: white;
}
 
.Popover--position-bottom-left,
.Popover--position-bottom-right,
.Popover--position-bottom-center {
  margin-top: .25rem;
}
 
.Popover--position-top-left,
.Popover--position-top-right,
.Popover--position-top-center {
  margin-top: -.25rem;
}