Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

When setting the tooltip to disabled, tooltip will still show on hover until a mouseout event fires. #759

Closed
PanRagon opened this issue Apr 11, 2022 · 1 comment

Comments

@PanRagon
Copy link
Contributor

I'm attempting to create a tooltip for an input field, out of UI concerns this tooltip should show up when the user hovers the element, but if they select the input the tooltip should dissapear and not be revealed until the user deselects the input field. By using a disabled flag to disable the ReactTooltip and utilizing the static hide() function, this almost works, but the tooltip will still show if the user moves the mouse until the mouse leaves the input element, at which point the tooltip will be hidden until the disabled-flag is switched off.

This seems like unintentional behavior, if I disable the Tooltip and run the hide()-function, I wouldn't expect the Tooltip to ever show up until it's been enabled again. Below is a fragment from the code showing how I've set it up, and a gif showing the issue in action:

  const [disableSummary, setDisableSummary] = useState(false);
  ...
             <input
                value={values.summary}
                onChange={handleChange}
                className={`form-control ${
                  !values.summary ? styles.requiredEmpty : styles.requiredFilled
                }`}
                name="summary"
                type="text"
                data-tip={t('summary-tooltip')}
                data-for="summary"
                onBlur={() => setDisableSummary(false)}
                onSelect={() => {
                  setDisableSummary(true);
                  ReactTooltip.hide(this);
                }}
              />
   ...
              <ReactTooltip
                id="summary"
                place="bottom"
                type="info"
                effect="float"
                disable={disableSummary}
              />

chrome_rSK7oCuGDw

@PanRagon
Copy link
Contributor Author

The issue is related to the component checking the state of the tooltip to see if it's disabled, not it's props. This state is only updated on the original hover (in showTooltip), not when the props change. This could be prevented by changing the state in componentDidUpdate, but it seems undesirable to set this state until the showTooltip is run to avoid unecessary state updates. Since the component should also value whether the target has the 'data-tip-disable' property it's not enough to simply check the disable prop when determining if the tooltip should be shown,

I'm not sure what solution you think is ideal, but I'll send out a PR where the updateTooltip()-function explicitly checks both the state and the prop value of disable. This should solve the problem without issue since the state should always honor the disabled prop anyway (it just doesn't always know it's been updated yet), but it might seem a bit counter-intuitive. I'll leave it open to @wwayne if you have any suggestion on how it ideally should be handled - because in any case I do think this is a bug that needs to be sorted.

aronhelser added a commit that referenced this issue Apr 12, 2022
fix: #759 - Disable tooltip when disable prop changes
pdeszynski pushed a commit to pdeszynski/react-tooltip that referenced this issue Aug 3, 2022
# [4.3.0](v4.2.21...v4.3.0) (2022-08-03)

### Bug Fixes

* [ReactTooltip#759](https://github.com/pdeszynski/react-tooltip/issues/759) - Disable tooltip when disable prop changes ([8e9cca0](8e9cca0))
* **aftershow:** call afterShow only after state has fully updated ([54752e8](54752e8))
* effect and type not properly applied at first render ([a8d0e51](a8d0e51))
* **getposition:** no error when all placements outside ([249b925](249b925))
* performance issue caused by excessive use of clearTimeout/Interval ([22aea50](22aea50))
* **react18:** tip not hiding with React 18 StrictMode enabled ([83b72c6](83b72c6))
* set aria-describedby value wrong when custom id ([a04d26c](a04d26c))

### Features

* **component:** adding "padding" property to customize padding style ([9ae765a](9ae765a))
* **getposition:** support desired-place-list (by priority) ([982d89d](982d89d))
* **parent_body_mode:** [ReactTooltip#535](https://github.com/pdeszynski/react-tooltip/issues/535) search parents for data-tip if in body mode ([71da348](71da348))
github-actions bot pushed a commit that referenced this issue Oct 13, 2022
# [4.3.0](v4.2.21...v4.3.0) (2022-10-13)

### Bug Fixes

* [#759](#759) - Disable tooltip when disable prop changes ([8e9cca0](8e9cca0))
* **aftershow:** call afterShow only after state has fully updated ([54752e8](54752e8))
* effect and type not properly applied at first render ([a8d0e51](a8d0e51))
* **getposition:** no error when all placements outside ([249b925](249b925))
* performance issue caused by excessive use of clearTimeout/Interval ([22aea50](22aea50))
* **react18:** tip not hiding with React 18 StrictMode enabled ([83b72c6](83b72c6))
* set aria-describedby value wrong when custom id ([a04d26c](a04d26c))

### Features

* **component:** adding "padding" property to customize padding style ([9ae765a](9ae765a))
* **getposition:** support desired-place-list (by priority) ([982d89d](982d89d))
* **parent_body_mode:** [#535](#535) search parents for data-tip if in body mode ([71da348](71da348))
* **pencil:** readme updated to trigger next minor release (react 18 support release) ([bb9c79e](bb9c79e))
* **pencil:** readme updated to trigger next minor release (react 18 support release) ([3a6ec6c](3a6ec6c))
yuriisalo123 pushed a commit to yuriisalo123/react-tooltip that referenced this issue Jun 28, 2023
# [4.3.0](ReactTooltip/react-tooltip@v4.2.21...v4.3.0) (2022-10-13)

### Bug Fixes

* [#759](ReactTooltip/react-tooltip#759) - Disable tooltip when disable prop changes ([8e9cca0](ReactTooltip/react-tooltip@8e9cca0))
* **aftershow:** call afterShow only after state has fully updated ([54752e8](ReactTooltip/react-tooltip@54752e8))
* effect and type not properly applied at first render ([a8d0e51](ReactTooltip/react-tooltip@a8d0e51))
* **getposition:** no error when all placements outside ([249b925](ReactTooltip/react-tooltip@249b925))
* performance issue caused by excessive use of clearTimeout/Interval ([22aea50](ReactTooltip/react-tooltip@22aea50))
* **react18:** tip not hiding with React 18 StrictMode enabled ([83b72c6](ReactTooltip/react-tooltip@83b72c6))
* set aria-describedby value wrong when custom id ([a04d26c](ReactTooltip/react-tooltip@a04d26c))

### Features

* **component:** adding "padding" property to customize padding style ([9ae765a](ReactTooltip/react-tooltip@9ae765a))
* **getposition:** support desired-place-list (by priority) ([982d89d](ReactTooltip/react-tooltip@982d89d))
* **parent_body_mode:** [#535](ReactTooltip/react-tooltip#535) search parents for data-tip if in body mode ([71da348](ReactTooltip/react-tooltip@71da348))
* **pencil:** readme updated to trigger next minor release (react 18 support release) ([bb9c79e](ReactTooltip/react-tooltip@bb9c79e))
* **pencil:** readme updated to trigger next minor release (react 18 support release) ([3a6ec6c](ReactTooltip/react-tooltip@3a6ec6c))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant