React-awesome-popover NPM

Starting with v5.0.0, this component is no longer based on Popper.js, which used react-popper. to use react-popper based popover you must use version 4.1.0

React-awesome-popover

npm.io

Installation

via NPM

npm i react-awesome-popover

via CDN (unpkg)

https://unpkg.com/react-awesome-popover@latest/build/index.umd.js

UMD library exposed as ReactAwesomePopover

const Popover = ReactAwesomePopover;

Example

ReactDOM.render(
  <Popover>
    <button>The Target</button>
    <div>The content</div>
  </Popover>,
  document.body
);

The component supports server-side rendering

You can also use nested popovers

ReactDOM.render(
  <Popover>
    <button>The Target</button>
    <div>
      ...
      <Popover>
        <button>The Target</button>
        <div>
          ...
          <Popover>
            <button>The Target</button>
            <div>The content</div>
          </Popover>
          ...
        </div>
      </Popover>
      ...
    </div>
  </Popover>,
  document.body
);

Performing an animation

<Popover>
  <button>Click</button>
  <Motion defaultStyle={{ opacity: 0 }} style={{ opacity: spring(1) }}>
    {style => {
      return (
        <div style={style}>
          <h3>Popover</h3>
        </div>
      );
    }}
  </Motion>
</Popover>

You can also use as a tooltip.

Very simple!.

npm.io

<Popover>
  <button>The Target</button>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus error
    laudantium incidunt vitae dignissimos praesentium nesciunt,
    <Popover action="hover" placement="top">
      <b>pariatur provident natus</b>
      <div>Wow man</div>
    </Popover>
    aperiam, corporis, quo libero sapiente recusandae! Distinctio deserunt dolor
    sequi, i
  </div>
</Popover>

Props

Prop	Type	Description	Default
arrow	Boolean	If `false`, the arrow is removed	`true`
placement	String	The placement of the popover.`top-start`,`top-center`,`top-end`,`left-start`,`left-center`,`left-end`,`right-start`,`right-center`,`right-end`,`bottom-start`,`bottom-center`,`bottom-end`	`auto`
action	String	`click` or `hover`. Supports touch event	`click`
onOpen	Function	The callback is called when the content is mounted
onClose	Function	The callback is called after the content is unmounted from the dom
open	Boolean	Whether the popover is visible. Passing this prop puts the popover in controlled mode. To make the popover completely manageable, you must pass the `null` value to the `action` prop	`false`
zIndex	Number	Initial number for zIndex	1000
overlayColor	String	Set the background color of an overlay element	rgba(0,0,0,0.5)
arrowPropss	Object	Pass any prop to the div element that wraps the arrow	`{}`
preventDefault	Boolean	Cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur.more	`false`
stopPropagation	Boolean	Stops the bubbling of an event to parent elements, preventing any parent event handlers from being executed. more	`false`