CODEWITHSUNDEEP
javascriptreactjs
Jack Wilkinson
Jack Wilkinson

Reputation: 487

React - How can i close all other tooltips?

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.

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 handleWindowClick 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.

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 (
            <Tooltip
                open={this.state.show}
                tip={this.props.tip}
                position="bottom"
                closeButton="visible"
                onClose={this.onTooltipClosed}
            >
                <div onClick={this.toggleTooltip}>{this.props.children}</div>
            </Tooltip>
        );
    }
}

Upvotes: 1

Views: 2278

Answers (1)

jsDevia
jsDevia

Reputation: 1292

Maybe adding click listener to body may help you, please try this:

document.body.addEventListener('click', this.onClickBody);

Upvotes: 1

Related Questions