What would be the data-event-off to hide the tooltip whenever you click outside of the trigger (anywhere on the page)?
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>
)
}
Most helpful comment
This seems to do the trick for me, enabling pointerEvents + stopping click event propagation on tooltip content: