Как закрыть все открытые тултипы при клике на закрытый в React?

Question

[Сергей]

Есть рабочий код на открытие тултипа. Но как закрывать все открытые, при клике на закрытый? Хочется сделать без сторонних пакетов.

import React from "react";
import cn from "classnames";

class Tooltip extends React.Component {
  constructor() {
    super();
    this.state = {
      isOpen: false,
      topOffset: 0,
    }
  }

  openTooltip(e) {
    const {target} = e;
    const targetTopOffset = target.getBoundingClientRect().top;

    if (target.classList.contains('--is-open')) {
      setTimeout(() => {
        this.closeTooltip();
      }, 100);
    }
    
    this.setState({
      isOpen: true,
    });

    this.setState({
      topOffset: targetTopOffset + 30,
    });

    window.addEventListener('scroll', () => {
      this.closeTooltip();
    })
  }

  closeTooltip() {
    this.setState({
      isOpen: false,
      topOffset: 0,
    });
  }

  render() {
    const styles = {
      top: this.state.topOffset + 'px'
    }

    return (
      <div className={cn(
        'tooltip',
        this.props.extraClass,
      )}>
        <button
          className={cn(
            'tooltip__label',
            {'--is-open': this.state.isOpen}
          )}
          onClick={this.openTooltip.bind(this)}
        >
          {this.props.label || '?'}
        </button>
        <span className="tooltip__content" style={styles}>
          {this.props.children}
        </span>
      </div>
    );
  }
}

export default Tooltip;

Answer 1

[Максим]

Тебе нужно создать сущность, которае будет знать про все тултипы. При клике на "закрытый" уведомлять это место, и прокидывать новые значения (isOpen) в во все тултипы