OverflowTooltip

OverflowTooltip.jsx

import React from 'react';
import ReactResizeDetector from 'react-resize-detector';
import PropTypes from 'prop-types';
import ReactTooltip from 'react-tooltip';

export default class OverflowTooltip extends React.Component {
  constructor(props) {
    super(props);
    this.node = null;
    this.onResize = this.onResize.bind(this);
  }

  onResize() {
    if (this.node.offsetWidth < this.node.scrollWidth) {
      this.node.setAttribute('data-tip', this.props.children);
    } else if (this.node.hasAttribute('data-tip')) {
      this.node.removeAttribute('data-tip');
    }
    ReactTooltip.rebuild();
  }
  render() {
    const { children, element, ...others } = this.props;
    const Container = element || 'div';
    return (
      <Container
        {...others}
        ref={node => {
          this.node = node;
        }}
      >
        {children}
        <ReactResizeDetector
          handleWidth
          handleHeight
          onResize={this.onResize}
        />
      </Container>
    );
  }
}

OverflowTooltip.propTypes = {
  children: PropTypes.string.isRequired,
  element: PropTypes.string
};