Ndtyjky

I am using Reactstrap (version 6.5.0) for styling of my ReactJs project.

I have an inline form which has a submit button. This button is disabled until the user has entered the mandatory details in the form.

What I am trying to achieve is the following:

1. User should be shown a tooltip when he hovers over the disabled button (i.e he has not filled in the mandatory details).


2. When he fills in the mandatory details, the tooltip should no longer be shown on the submit button.

I am using Reactstrap UncontrolledTooltip component as follows

    <button id="submitButton" type="submit" onClick={this.onSubmit} className="btn" disabled={this.state.submitButtonDisabled}>Submit</button>

    { this.state.submitButtonDisabled &&

                  <UncontrolledTooltip placement="bottom" target="submitButton">

                       Please fill in the mandatory details

                  </UncontrolledTooltip>

     }

My component has this.state.submitButtonDisabledstate which I toggle based on whether all the mandory feilds are filled in.

However, what is happening is that the tooltip is not shown on hover over the disabled submit button. It is only shown when I try to click the disabled submit button a few times.
Also, once the mandatory details have been filled in and submit button becomes enabled, tooltip keeps on showing even then on hover.

Edited : I also noticed that clicking the submit button also gives below warning in the console

     index.js:1452 Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

How can I achieve the expected behaviour using Reactstrap (I don't want to use jquery just for the tooltip)
Any help would be highly appreciated.

Thanks.