React-tooltip: hide tootip when click a button in ReactTooltip

[windinging]

`

      <ReactTooltip id="GIN" aria-haspopup="true" place="top" globalEventOff="click">

        <div>
          Resend confirmation email?
          <div className={styles.toolTipButton}>
            <Button type="primary" onClick={() => { ReactTooltip.hide(); }}>Yes</Button>
            <Button>No</Button>
          </div>
        </div>
      </ReactTooltip>`

when I click the yes button the tooltip doesn't hide immediately. It just hide after i move the away from the button. it seems the ReactTooltop.hide() function doesn't work.How can i hide the tooltip immediately when i click the yes button

[stearagon]

@windinging When you call hideTooltip, This function will check if the mouse is on the tooltip on this line https://github.com/wwayne/react-tooltip/blob/master/src/index.js#L443. If the mouse is on tooltip, it will wait for the mouse to exit the tooltip to close the tooltip.

There is no explicit prop to set to avoid this check and close the tooltip even if the mouse is over the tooltip.

This is super hacky but if you look at https://github.com/wwayne/react-tooltip/blob/master/src/index.js#L164 of the mouseOnTooltip function, the code will check if the tooltipRef is set on the ReactTooltip instance. If it isn't, it will return false. You can set that to null before calling hideTooltip which will allow you to close the tooltip.

[windinging]

@stearagon

how can i set mouseOnTooltip to null

[stearagon]

@windinging You can set a ref on tooltip <Tooltip ref={el => this.tooltip = el} />
then have your close function include this.tooltip.tooltipRef = null before you call ReactTooltip.hide

[dim2k2006]

@windinging Can you share your code with this solution?

[JesusJavierMoreno]

Hello!

I dont know if you still ned it but I got it working this way.

I hope it works for you! :D

[josh-stevens]

I had to do something similar and it's a bit hacky, but it works with Typescript and React Hooks for the useRef:

put the ref on the ReactTooltip:

and this function for the close button inside the tooltip:

It would be nice to disable the mouseover check in this lib so we don't have to force this null, I will look into doing a PR if there's any other demands for it

[haresh14]

@JesusJavierMoreno You are life saver man! Thank you! :)

[KumarSumitD]

@josh-stevens I tried your solution. It works fine for first click. When i click again next time, even without clicking close icon or clicking outside, just on entering and coming out of tooltip closes the tooltip. It happens alternate.

[antonfrolovsky]

Add someone already optional onClose handler :)

[anhthi-ieig]

@josh-stevens ...Thank you for your solution