React-tooltip: Click outside of tooltip for disable

Created on 3 Jan 2018  路  1Comment  路  Source: wwayne/react-tooltip

What would be the data-event-off to hide the tooltip whenever you click outside of the trigger (anywhere on the page)?

Most helpful comment

This seems to do the trick for me, enabling pointerEvents + stopping click event propagation on tooltip content:

onClickTooltipContent(e){
    // do not hide tooltip when clicking inside tooltip content area
    e.stopPropagation()
}

render() {
    const tooltipStyle = {
        pointerEvents: 'auto', // enable click/selection etc. events inside tooltip
        overflowY: 'auto', // make content scrollable,
        ...this.props.style // apply style overrides
    }

    return (
        <span>
            <i
                style={{ cursor: 'pointer' }}
                className="mdi mdi-information-outline"
                data-tip
                data-for={this.props.path}
                data-event="click" // click on this element will open tooltip
            />
            <Tooltip
                id={this.props.path}
                type="info"
                effect="solid"
                globalEventOff="click" // with onClickTooltipContent, only clicks OUTSIDE tooltip content will close tooltip
                place={this.props.place}
            >
                <div style={tooltipStyle} onClick={this.onClickTooltipContent}>
                                        Select me, click me or whatever
                                    </div>
            </Tooltip>
        </span>
    )
}

>All comments

This seems to do the trick for me, enabling pointerEvents + stopping click event propagation on tooltip content:

onClickTooltipContent(e){
    // do not hide tooltip when clicking inside tooltip content area
    e.stopPropagation()
}

render() {
    const tooltipStyle = {
        pointerEvents: 'auto', // enable click/selection etc. events inside tooltip
        overflowY: 'auto', // make content scrollable,
        ...this.props.style // apply style overrides
    }

    return (
        <span>
            <i
                style={{ cursor: 'pointer' }}
                className="mdi mdi-information-outline"
                data-tip
                data-for={this.props.path}
                data-event="click" // click on this element will open tooltip
            />
            <Tooltip
                id={this.props.path}
                type="info"
                effect="solid"
                globalEventOff="click" // with onClickTooltipContent, only clicks OUTSIDE tooltip content will close tooltip
                place={this.props.place}
            >
                <div style={tooltipStyle} onClick={this.onClickTooltipContent}>
                                        Select me, click me or whatever
                                    </div>
            </Tooltip>
        </span>
    )
}
Was this page helpful?
0 / 5 - 0 ratings