> 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

![](https://res.cloudinary.com/dmtrk3yns/image/upload/q_auto/v1568812281/react-awesome-popover/ezgif-5-6832e82b1255.gif) ### Installation --- **via NPM** ```code npm i react-awesome-popover ``` **via CDN (unpkg)** ```code https://unpkg.com/react-awesome-popover@latest/build/index.umd.js ``` UMD library exposed as `ReactAwesomePopover` ```js const Popover = ReactAwesomePopover; ``` ### Example ```jsx ReactDOM.render(

The content

, document.body ); ``` > The component supports server-side rendering ### You can also use nested popovers ```jsx ReactDOM.render(

...

The content

...

, document.body ); ``` ### Performing an animation ```jsx {style => { return (

Popover

); }} ``` ### You can also use as a tooltip. Very simple!. ![](http://res.cloudinary.com/dmtrk3yns/image/upload/c_scale,q_auto,w_278/v1536139578/ezgif.com-video-to-gif_6_sqhep4.gif) ```jsx

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus error laudantium incidunt vitae dignissimos praesentium nesciunt, pariatur provident natus

Wow man

aperiam, corporis, quo libero sapiente recusandae! Distinctio deserunt dolor sequi, i

``` ### 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](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) | `false` | | stopPropagation | Boolean | Stops the bubbling of an event to parent elements, preventing any parent event handlers from being executed. [more](https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation) | `false` |

	Stars	Issues	Version	Updated	Created
popper.js	28,592	10	1.16.1	4 years ago	8 years ago
react-awesome-popover	193	21	6.1.1	5 years ago	6 years ago
react-popover	598	98	0.5.10	6 years ago	9 years ago
react-popper	2,490	40	2.3.0	2 years ago	8 years ago

popper.js vs react-awesome-popover vs react-popover vs react-popper

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past