class Tooltip extends React.Component {
  render() {
    const { text, tooltipId } = this.props;
    return ReactDOM.createPortal(text, document.getElementById(tooltipId));
  }
}

export class App extends React.Component {
  state = {
    text: '',
  };

  onDocumentClick = (event) => {
    if (event.target.tagName === 'BUTTON') {
      this.setState({ text: event.target.textContent });
    }
  };

  componentDidMount() {
    document.addEventListener('click', this.onDocumentClick);
  }
  componentWillUnmount() {
    document.removeEventListener('click', this.onDocumentClick);
  }

  render() {
    return (
      <div>
        {this.props.children}
        <Tooltip text={this.state.text} tooltipId={this.props.tooltipId} />
      </div>
    );
  }
}