Get TextBox value in to ToolTip title

Question

i'm new to front-end technologies.i need to get TextBox value into the Tool-tip.in code TextBox max length is 30.but in textBox area not fit to that characters length.then need to decide using ToolTip and hover over the partially display value.

following is my code

                   <Tooltip title={########}>
                    <input
                      type="text"
                      maxLength="30"
                      name="displayName"
                      placeholder=""
                      onChange={displayNameChange.bind(this, f)}
                      className="form-control input-display-name"
                    />
                    </Tooltip> 

need to get that textBox value in to title={########}.

Appreciate your help.

thanks,

Answer 1

You can try following approach:

• Create a stateful component where value of input will be held in state.
• On change of value, update the value in state.
• Now you can use this state property to show tooltip.

As an add on, you can try following as well:

• Pass a max length property that would fit in a textbox.
• If value exceeds, show tooltip
• Else dont show.

This will reduce redundant information.

Following is a sample: JSFiddle

const Tooltip = (props) => {
    const [ inputValue, setInputValue ] = useState('');

  function handleKeyup(event) {
    setInputValue( event.target.value );
  }

  return (
    <div title={ inputValue.length > props.visibleLen ? inputValue : null }>
      <input value={inputValue} onChange={ handleKeyup } />
    </div>
  )
}