vaheqelyan / React Awesome Popover

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

Installation

via NPM

npm i react-awesome-popover

via CDN (unpkg)

https://unpkg.com/[email protected]/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!.

<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