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