Description
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}
/>