title: React - How can i close all other tooltips?
body: <p>I currently have a tooltip component provided to me from work which all works great, so I have made a Tooltip Wrapper to fulfil extra requirements.</p>
  
  <p>The issue is i want to close all other instances of the tooltip when i tap on another. I have already added a click event listener for window so any instances of the tooltip are closed whenever i click else ware. The issue i'm having is that this <code>handleWindowClick</code> event doesn't fire when i click on another tooltip and as a result i am able to open multiple tooltips at once. When the requirement is that, whenever a tooltip is opened, the other closes so there is only ever one tooltip open at once.</p>
  
  <pre><code>import { Tooltip } from "Tooltip";
  import React, { Component } from "react";
  
  export default class TooltipWrapper extends Component {
      constructor() {
          super();
  
          this.handleWindowClick = this.handleWindowClick.bind(this);
          this.toggleTooltip = this.toggleTooltip.bind(this);
          this.onTooltipClosed = this.onTooltipClosed.bind(this);
          this.state = {
              show: false
          };
      }
  
      componentDidMount() {
          window.addEventListener('click', this.handleWindowClick);
      }
  
      componentWillUnmount() {
          window.removeEventListener('click', this.handleWindowClick);
      }
  
      toggleTooltip() {
          this.setState({
              show: !this.state.show
          });
      }
  
      handleWindowClick(event) {
          this.setState({
              show: false
          });
      }
  
      onTooltipClosed() {
          this.setState({
              show: false
          });
      }
  
      render() {
          return (
              &lt;Tooltip
                  open={this.state.show}
                  tip={this.props.tip}
                  position="bottom"
                  closeButton="visible"
                  onClose={this.onTooltipClosed}
              &gt;
                  &lt;div onClick={this.toggleTooltip}&gt;{this.props.children}&lt;/div&gt;
              &lt;/Tooltip&gt;
          );
      }
  }
  </code></pre>