[SOLVED] onmouseover show Message on React

Issue

I want to show a message when the user mouse over the ‘Validate’ button when it is only disabled.
I did the following code but nothing happened.

 <button
     type="button"
     className="frm_btn"
     onClick={(e) => generateFiles()}
     onMouseOver={(e) => {alert('Please select File Type.')}}
     disabled={state === 'loading'}
    > Validate
 </button>

Solution

Well, when Your html element disabled (disabled attribute is set on it), the element doesn’t fire event (hence, nor they (the events) bubble up), so hack could be to wrap the button in a span (listening the mouseover event and have it larger in size – so it has mouseover before mouse reaches the disabled button actually…) :

 <span style={{ display: 'inline-block', padding: 10}} className="button-holder"
  onMouseOver={(e) => {alert('Please select File Type.')}}
 >
  <button
     type="button"
     className="frm_btn"
     onClick={(e) => generateFiles(e)}
    //  onMouseOver={(e) => {alert('Please select File Type.')}}
     disabled={state === 'loading'}
    > Validate
  </button>
</span>

Answered By – Vovan_Super

Answer Checked By – Mary Flores (BugsFixing Volunteer)