Skip to content

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

Closed
@PanRagon

Description

@PanRagon

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions