React-tooltip: Using event and eventOff to handle tooltips for focusing and hovering

[tonynd]

Hello @wwayne,

So I am using the react-tooltip to show errors for an input field. Everything works great, but I was wondering if there is a way to for me to do this. I want both focus and hover to show and hide the tool tip. When the cursor is in the text box, the tooltip should appear regardless of the mouse being over the input field. If the cursor is not in the input field, we switch it to hover and when the mouse hover over the input field, we will see the tooltip. I tried giving the event and eventOff props of the tooltip to a function which will give "focusin/focusin" or "mouseover/mouseleave" depending on if the input field is an active element or not.

I also tried putting "focusin mouseover" in the event prop and "focusout mouseleave" in the eventOff prop with no success.

Any help would be appreciated!

[wwayne]

I've done some update, after updating to 3.1.0, you can try something similar like this:

constructor () {
  this.state = { isActive: true }
}

handleFocus () {
  this.setState({
     isActive: true
  }, () => ReactTooltip.rebuild())
}

handleBlur () {
  this.setState({
     isActive: false
  }, () => ReactTooltip.rebuild())
}

render () {
 const {isActive} = this.state
  return (
     <div>
          <p data-tip='test' 
             data-event={isActive && 'focus' || ''}
             data-event-off={isActive && 'focusout' || ''}
             onFocus={::this.handleFocus} 
             onBlur={::this.handleBlur}></p>
          <ReactTooltip effect='solid' />
     </div>
  )
}

[tonynd]

Hello @wwayne,

Thanks for the reply. I forgot to mention that, the way my form and inputs are structured (I am using a JSON schema generator to create my form), I directly coded the tooltip to multiple input fields which technically does not have a state. When there is an error, the form (contains about 10 input fields, each with its own tooltip) component rerenders and turn on the tooltip on the ones with errors. Is there possibly a way in doing it just from the ReactTooltip itself?

Here is what I am working with:

<div>
      <input
        type="text"
        data-tip={props.id + "_tooltip"}
        data-for={props.id + "_tooltip"}
        id={props.id}
        value={props.value || ""}
        required={props.required}
        onChange={(event) => props.onChange(event.target.value)}
      />
      <div className={errorStatus}>
        <ReactTooltip
          id={props.id + "_tooltip"}
          effect="solid"
          getContent={[() => _getUpdatel(props.value), 500]}
          event="focusin"
          eventOff="focusout"
        />
      </div>
</div>

_errorStatus_ is used in the div to show/hide the tooltip depending if there is an error on that input field. There is no state I can work with since this is a general div to generate multiple input fields in the same form (which does have a state, but I don't have access to because of the structure of the JSON schema form.)

Again, thanks for the help! =D

[wwayne]

Hmm, then I don't think the ReactTooltip component can satisfy your requirement itself without other states' help