joywok-material-components/components/popper/custom.js

<h1 align="center"> Joywok Material Components </h1>

import React from 'react';
import ReactDOM from 'react-dom';
import Popper from '@material-ui/core/Popper';
import Fade from '@material-ui/core/Fade';
import Paper from '@material-ui/core/Paper';
require('./style/custom.css');
/*
<Popover placement="right" content={'dsaaaaaaaaaaaaaaaaaaaaaaaaadsaaaaaaaaaaaaaaaaaaaaaaaaadsaaaaaaaaaaaaaaaaaaaaaaaaadsaaaaaaaaaaaaaaaaaaaaaaaaadsaaaaaaaaaaaaaaaaaaaaaaaaa'} trigger="hover">
  <i className="icon-share-help"></i>
</Popover> 
*/
class JwCustomPopper extends React.Component{
  constructor(props) {
    super(props);
   	this.state = {
   		show:false,
   		anchorEl:null
   	};
  }
  handlePopoverOpen(e){
  	this.setState({
  		open:true,
  		anchorEl:e.currentTarget
  	})
  	console.log('dsadasda');
  }
  handlePopoverClose(){
  	this.setState({
  		anchorEl:null,
  		open:false
  	})
  }
  open(e){
  	this.setState({
  		open:true,
  		anchorEl:e.currentTarget
  	})
  	e.stopPropagation()
  }
  render(){
  	//
  	return (<div className={"jw-popper-custom"}>
  			<div className="" onMouseEnter={(e)=>this.handlePopoverOpen(e)} onMouseLeave={(e)=>this.handlePopoverClose(e)}>{
  				this.props.children
  			}</div>
       	<Popper className="jw-popper-custom-main" style={{
       		zIndex:"2000",
       		marginLeft:"5px"
       	}} 
       	modifiers={{
	      arrow: {
	        enabled: true,
	        element: this.state.anchorEl,
	      },
	    }}
       	placement={'right-start'} open={this.state.open} anchorEl={this.state.anchorEl} transition>
       		{({ TransitionProps }) => (
	          <Fade {...TransitionProps} timeout={350}>
	            <Paper className="jw-popper-custom-value">
	              {this.props.content}
	            </Paper>
	          </Fade>
	        )}
        </Popper>
      </div>
      )
  }
}

export default JwCustomPopper;