Get started with react-popper CDN
MIT licensed
React-Popper: React library for dynamic tooltips/popovers with Popper.js positioning.
Tags:- react
- react-popper
- popperjs
- component
- drop
- tooltip
- popover
Stable version
Copied!
How to start using react-popper CDN
import React from 'react';
import Popper from 'react-popper';
class Tooltip extends React.Component {
constructor(props) {
super(props);
this.state = {
showTooltip: false,
};
this.handleMouseEnter = this.handleMouseEnter.bind(this);
this.handleMouseLeave = this.handleMouseLeave.bind(this);
}
handleMouseEnter() {
this.setState({ showTooltip: true });
}
handleMouseLeave() {
this.setState({ showTooltip: false });
}
render() {
const { referenceElement, popperElement } = this.props;
const { showTooltip } = this.state;
return (
<>
<div ref={referenceElement} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
Hover me
</div>
<Popper placement="bottom" isOpen={showTooltip} target={referenceElement.current} modifiers={{ flip: { enabled: false } }}>
<div ref={popperElement}>This is the tooltip</div>
</Popper>
</>
);
}
}
export default Tooltip;
Copied!
Copied!
All versions
0.0.1
0.10.0
0.10.1
0.10.2
0.10.3
0.10.4
0.2.0
0.2.1
0.2.2
0.3.0
0.4.0
0.4.1
0.4.2
0.4.3
0.5.0
0.6.0
0.6.1
0.6.2
0.6.3
0.6.4
0.6.5
0.6.6
0.6.7
0.7.0
0.7.1
0.7.2
0.7.3
0.7.4
0.7.5
0.8.0
0.8.1
0.8.2
0.8.3
0.9.0
0.9.1
0.9.1-alpha.1
0.9.2
0.9.3
0.9.4
0.9.5
1.0.0
1.0.0-alpha.1
1.0.0-beta.1
1.0.0-beta.2
1.0.0-beta.3
1.0.0-beta.4
1.0.0-beta.6
1.0.1
1.0.2
1.1.0
1.2.0
1.3.0
1.3.1
1.3.10
1.3.11
1.3.2
1.3.3
1.3.4
1.3.5
1.3.6
1.3.7
1.3.8
1.3.9
2.0.0
2.1.0
2.2.0
2.2.1
2.2.2
2.2.3
2.2.4
2.2.5
*** 2.3.0