React-tooltip: Implementation for displaying error validations

[RanjithNair]

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 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 : )

[RanjithNair]

Thanks @wwayne ! Appreciate your help in sharing an example along with the explanation. That really helped me in solving what i was trying to do. Just couple of queries on that :-

• If there is a scrolling form, the tooltips kind of looses their position and sometimes gets hidden as well if you try scrolling it.
• Is there a way to selectively hide a ReactTooltip like ReactTooltip.hide(findDOMNode(this.refs.test)). I have multiple tooltips in my form and when i try to selectively hide a tooltip, it kinds of hides all of them.

[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.

[RanjithNair]

Thanks @wwayne for releasing the new version with those features. The hiding of the tooltip works perfectly.

However for the scroll, i guess there would be an issue with the positioning. So after your changes, it doesnt gets hidden but since the position of the tooltip is fixed, it maintains its position even when you scroll.
.__react_component_tooltip { position: fixed; }
Shouldnt the position of the tooltip be relative to the element to which its attached?

[wwayne]

@RanjithNair hmm you wanted to keep the tooltip's position when scrolling, it needs to be re-calculated and it's not easy to implemented, I'm not sure only css can control it, so you'd better skip this because I don't have enought time to improve this for the moment.

[oyeanuj]

@RanjithNair Where did you end up with your usecase? I have a similar use case and am curious to see what worked for you. Any tips, code snippets that you could share?