https://github.com/dbtek/react-popover

Totally controlled popover component.
https://github.com/dbtek/react-popover

component overlay popover react tooltip

Last synced: 9 months ago
JSON representation

Totally controlled popover component.

• Host: GitHub
• URL: https://github.com/dbtek/react-popover
• Owner: dbtek
• License: mit
• Created: 2016-07-24T21:03:04.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2022-12-06T20:27:32.000Z (over 3 years ago)
• Last Synced: 2025-09-01T11:11:19.712Z (10 months ago)
• Topics: component, overlay, popover, react, tooltip
• Language: JavaScript
• Homepage:
• Size: 1.04 MB
• Stars: 31
• Watchers: 1
• Forks: 22
• Open Issues: 27
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          


 
React Simple Popover

 


  Totally controlled popover component based on React Overlays.

 


 

 

 Try yourself



## Install

```bash

 $ npm install react-simple-popover

```

## Usage

```js

import Popover from 'react-simple-popover';

import React, { Component } from 'react';

class PopoverDemo extends Component {

  constructor(props) {

    super(props);

    this.state = {

      open: false

    };

  }

  handleClick = (e) => {

    this.setState({open: !this.state.open});

  }

  handleClose = (e) => {

    this.setState({open: false});

  }

  render() {

    return (

      


         { this.target = node }}

          onClick={this.handleClick}>Popover

        

          
This is popover

        

      

    );

  }

}

```


## Options

**placement**  

One of `left`, `right`, `bottom` or `top`.

**show**  

Boolean, `true` if popover is shown; `false` otherwise.

**showArrow**  

Boolean, set `false` to hide arrow. Default is `true`.

**onHide**  

Hide callback function.

**target**  

Target ref to align popover around target element.

**container**  

Reference to the component that represents the context

**hideWithOutsideClick**  

Boolean, `true` if popover should hide when clicked outside; `false` otherwise.

**containerStyle**  

Style for outermost container

**arrowStyle**  

Style for arrow

**style**  

Style for the content's container 

## Author

Ismail Demirbilek - [@dbtek](https://twitter.com/dbtek)  

MIT Licensed