React-tooltip: Hide Tooltip after button click

[quicklikerabbit]

I want to show a 'Copied!' tool-tip adjacent to a "Copy URL" button. I can get the tool tip to show on click with the code below, but it will only hide after a delay if I click the button again.

<CopyToClipboard text={viewState.copyUrl}>
    <RaisedButton
        label="Copy URL"
        primary={true}
        data-tip
        data-event='click'
        data-for='copyToClipboard'
        onClick={viewState.copyClick}
        style={{ width: '150px' }} />
</CopyToClipboard>
<ReactTooltip id='copyToClipboard' delayHide={1000}>
    <p>Copied!</p>
</ReactTooltip>

Any thoughts on how I can get this to hide?

[vivcogit]

Try use ref on ReactTooltip and hideTooltip function:

<CopyToClipboard text={viewState.copyUrl}>
    <RaisedButton
        label="Copy URL"
        primary={true}
        data-tip
        data-event='click'
        data-for='copyToClipboard'
        onClick={() => {this.tooltip.hideTooltip(); viewState.copyClick();}}
        style={{ width: '150px' }} />
</CopyToClipboard>
<ReactTooltip ref={(node) => this.tooltip = node} id='copyToClipboard' delayHide={1000}>
    <p>Copied!</p>
</ReactTooltip>

[carlobernardini]

Is there a way to prevent the tooltip from showing up when data-delay-show is defined and you clicked before the tooltip is actually shown? It seems that when I hide the tooltip programmatically (e.g. using Tooltip.hide(ref)) on click, it still shows up after that given delay. I also tried using data-event-off="click" without success.

[steveabouem]

Same issue here.
<Flex row nowrap> <br> <a data-tip data-for='confirmation' data-event='click' > <Button /> </a> <ReactTooltip id='confirmation' data-html={true} data-effect='solid' class='confirm-buttons' multiline={true} > <span> Permanently delete? <br /> <buttonOne onClick={() => this.deleteItems(arguments)}>Yes</buttonOne> <buttonTwo onClick={() => ReactTooltip.hide()}>No</buttonTwo> </span> </ReactTooltip> ``
(Flex component imported from styled-flex-components library).

My deleteItems function works just fine, but the ReactTooltip.hide() only takes effect if i move the mouse away from the tooltip. If I don't call ReactTooltip.hide(), the tooltip stays on screen indefinitely so something is happening.Just not when I want it to. Any thoughts?

[qboot]

I was able to manage this with a function that handle click :

handleTooltip = () => {
    const node = findDOMNode(this.refs.clippedText);
    ReactTooltip.show(node);
    setTimeout(() => {
        ReactTooltip.hide(node);
    }, 750);
};

Then I add this to my component:

<Component
    ...
    onClick={() => {
         this.copyToClipboard();
         this.handleTooltip();
    }}
    data-tip="Text copied!"
    ref="clippedText"
/>

Finally, the "trick" is to add an unknown event to event prop so hover will not trigger show function of tooltip:

<ReactTooltip place="bottom" effect="solid" event="no-event" />

It should maybe also work specifically with the data-event prop.

[windinging]

Same issue here.
`
Permanently delete?
```
(Flex component imported from styled-flex-components library).

My deleteItems function works just fine, but the ReactTooltip.hide() only takes effect if i move the mouse away from the tooltip. If I don't call ReactTooltip.hide(), the tooltip stays on screen indefinitely so something is happening.Just not when I want it to. Any thoughts?

i have the same problem.do u solve the problem