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>`` (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. `<Flex row nowrap>
<Button /> <ReactTooltip id='confirmation' data-html={true} data-effect='solid' class='confirm-buttons' multiline={true} > Permanently delete?
<buttonOne onClick={() => this.deleteItems(arguments)}>Yes</buttonOne> <buttonTwo onClick={() => ReactTooltip.hide()}>No</buttonTwo> </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?

i have the same problem.do u solve the problem

[grascioni]

I just used the afterShow function, like

afterShow={() => { navigator.clipboard.writeText(someTextToCopy); setTimeout(() => ReactTooltip.hide(), 1000); }}

[nerdyman]

For anyone using hooks, this will ensure the timer gets reset if the user repeatedly clicks on the tooltip trigger after the timer has started.

const JustTheTip: React.FC = (props) => {
  const ref = useRef<HTMLButtonElement>(null);
  const timer = useRef<NodeJS.Timer | null>(null);

  const handleClick = useCallback(() => {
    if (timer.current) clearTimeout(timer.current);

    const button = ref.current as HTMLButtonElement;

    ReactTooltip.show(button);

    timer.current = setTimeout(() => {
      ReactTooltip.hide(button);
    }, 3000);
  }, []);

  return (
    <button {...props} ref={ref} onClick={handleClick} data-event="no-event">
      Do something
    </button>
  );
};