Implementation for displaying error validations

I am trying to use this to display error validations on my screen. So, if there are any errors, i want to show it and not hide it unless i explicitly call hide(). Also, i dont want the option to show the tooltip on hover, after hiding it explicitly. So, for this i am using the disable attribute conditionally.

I am facing some issues in implementing the above things :-

• If we use the show method, would it continue to show the tooltip unless hover/click is performed? ReactTooltip.show(findDOMNode(this.refs.summary)); What i could see is that, it shows the tooltip but on hover it goes away. I tried using the “eventOff” props by setting it to click, but it still gets hidden on hover.

• I dont want to show the tooltip on hover, instead always control the visibility via show() and hide() only. I am not able to do this. I also tried to use “disable” attribute conditionally, but this just works for the first instance. So, if data is valid i am disabling the tooltip in the below fashion.

  But what i see happening is that, if i keep my mouse pointer static without moving and then fixing the data validation to make disabled attribute as true, it gets disabled properly. But if the tooltip is enabled, and i move around my mouse pointer outside of the tooltip area, the tooltip doesnt get disabled even after the disabled attribute is set to true. <ReactTooltip id='summaryErrorToolTip' type='error' disable={data.isValid}> <span>Invalid Data</span> </ReactTooltip>

TL;DR: I need to control tooltips entirely via hide() and show() and disable the feature of hiding tooltips on hover/click.

[wwayne]

@RanjithNair I was thinking it would be useful if ReactTooltip.hide is able to hide a specific tooltip, so in latest 3.1.8, it start to support ReactTooltip.hide(findDOMNode(this.refs.foo)).

And now you can use scrollHide=false and resizeHide=false to prevent hiding tooltip from scrolling or resizing the window. You can check more detail in README.

[wwayne]

@RanjithNair I build a small example for you:

<div>
      <p ref= 'test' data-tip data-for='summaryErrorToolTip'>hehehhehe</p>
     <button onClick={() => { ReactTooltip.show(findDOMNode(this.refs.test)) }}>Show</button>
     <button onClick={() => { ReactTooltip.hide() }}>Hide</button>
     <ReactTooltip id='summaryErrorToolTip' type='error' place='bottom' event='nothing'>
          <span>Invalid Data</span>
      </ReactTooltip>
</div>

Let me explain:

1. Previously, you set event-off doesn’t work because event-off must be set with event together, it just used to specify which event to hide the tooltip when use has already set custom event to show the tooltip, and if user only set event, tooltip will show and hide by that event. So here I set a event='whatever', then tooltip will have no idea how to show and hide tooltip by itself
2. Pretty much : )