Use tooltip for form validation

[oyeanuj]

Hi @wwayne, back with some more questions :)

I am trying to use the tooltips to show validation error messages for my forms, like in the screenshot below. Essentially, once a user clicks on the 'Submit' button, if there is an error, then show it in the tooltip, in context.

I was thinking to use the static methods to show it in case of errors, but I am running into a couple of issues while trying to implement this.

• How to invoke the method to invoke the tooltip conditionally? Usually, in forms, the onClick is already being used for submitting the form? I would like it be shown after onClick if there is an error? In the code below, I try to do the same but it doesn't show up the first time I click on the button. I have to click on the button again for the tooltip to show up.

//Outside the render function
  showTooltip = (e) => {
    console.log(e.target);
    ReactTooltip.show(e.target);
  };

//First solution attempted: In the render function
<ReactTooltip getContent = {showError} effect = "solid" />
<Button
  ref = "flagButton"
  data-tip
  data-event = "focus" //have also tried "data-event = "click focus"

  disabled = {submitting}
  label = {submitting ? "Sending" : "Send Report" }
  submitting  = {submitting}
  type = "submit"
  onClick = {error && anyTouched && this.showTooltip}
/>

• I tried making data-tip conditional which almost worked but it shows an empty tooltip when there should be no tooltip. Code below

//Second solution attempted: In the render function
<ReactTooltip getContent = {showError} effect = "solid" />
<Button
  ref = "flagButton"
  data-tip = {error && anyTouched}

  disabled = {submitting}
  label = {submitting ? "Sending" : "Send Report" }
  submitting  = {submitting}
/>

Is there any other alternative that you can think of to invoke the tooltip in such a case? Essentially, is there a way to make the tooltip render conditionally?

• Secondly, is there a way to make the tooltip disappear after a few seconds?

Any thoughts would be very appreciated, thank you!

[oyeanuj]

Updated the comment to remove issue that was my bad.

[wwayne]

@oyeanuj I add a new option disable which would be useful in your situation, so for your code, ReactTooltip.show should invoked after submitting fail, because when you click the button, the error may not exist, so error && anyTouched && this.showTooltip won't trigger this.showTooltip, I think that's why you can't see the tooltip at the beginning.

import {findDOMNode} from 'react-dom'

<ReactTooltip getContent = {showError} effect = "solid" disable={!this.state.error} delayHide={1000} />
<Button
  ref = "flagButton"
  data-tip
  disabled = {submitting}
  label = {submitting ? "Sending" : "Send Report" }
  submitting  = {submitting}
  type = "submit"
/>

// your submitting function
const submit = () => {
   requestToServer('...', (err) => {
     // The submit get error
     if (err) {
        this.setState({
           error: err
        }, () => {
            ReactTooltip.show(findDOMNode(this.ref.flagButton))
        })
    }
  })
}

So to summarize:

• Use ReactTooltip.show(findDOMNode(this.ref.flagButton)) for showing manually
• Use delayHide for disappear after a few seconds
• Use disable to enable tooltip only after the error exist

[cklab]

@wwayne Disabling via an option seems like an uphill battle to me. I feel the proper way in React would be to handle a null return from getContent.

edit: see PR #189

[wwayne]

Thanks for @cklab 's suggestion, that's more react style.

Since 3.2.1, returning null or undefined from getContent will hide the tooltip automatically, but you need to set data-tip='' because React will set it to 'true' if it is empty.

See README https://github.com/wwayne/react-tooltip#2-hide-tooltip-when-getcontent-returns-null-or-undefined and Release log https://github.com/wwayne/react-tooltip/releases/tag/3.2.1

[cklab]

@wwayne Regarding your README, I just checked out 3.2.1 and have a component that has data-tip='true' and getContent() => { return null; } and I'm not having to set data-tip to '' if I return null, which I believe to be correct behavior. I'm not sure that the README is accurate in that respect.

[wwayne]

@cklab Yes my bad, 'true' needed to be set only when returning undefined or empty children, thanks for the Correction

[oyeanuj]

@wwayne So, I was finally back to this project to implement your suggestion above. All of the above works well so far - thank you!

One last thing - I am looking to close the tooltip if the user clicks elsewhere on the screen, rather than when the user hovers away. How do you suggest doing it? I tried data-event-off but that doesn't work here..

[wwayne]

@oyeanuj data-event-off should be used with data-event together. So in your case, I suppose you can use:

<p data-tip='tooltip' data-event='mouseenter' data-event-off='click'></p>
<ReactTooltip globalEventOff='click' />

[oyeanuj]

@wwayne Always appreciate the quick response! Couple of questions around that -

1. If I specify data-event, can I mention both hover and click? I am looking to show the tooltip either when the user hovers, or after they click or if they just press the 'enter' button to submit the form.
   If I can do that, then I can control when to display or not using getContent=null or making data-tip conditional.

2. What are the implications of setting globalEventOff = 'click'?

[wwayne]

@oyeanuj

1. Yes, you can try data-event: 'mouseenter click', and you said you want sth if they just press the 'enter' button to submit the form, you may need to add focus as well, so data-event: 'mouseenter click focus'
2. globalEventOff='click' means closing your tooltip by clicking anywhere on the screen

[oyeanuj]

@wwayne Thanks for that. Setting everything up works for all cases but one that I mentioned originally.

The data-event setup requires some sort of user action with the trigger (either mouseenter, click or focus). Is there any way to manually/programmatically trigger the tooltip to show?

In my case, if there is a validation error, I want it to pop up on an adjoining element or the button without the use needing to interact with that element? Is that possible using refs.openTooltip or any other way?

[wwayne]

@oyeanuj Yes, you can use ReactTooltip.show https://github.com/wwayne/react-tooltip#reacttooltipshowtarget