onmouseover show Message on React

Question

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>

score 0 · Accepted Answer · answered Mar 14 '22 at 08:11

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>

score 0 · Answer 2 · answered Mar 14 '22 at 08:26

when button is disable mouse over do not working you can put the button on the other elemt and fire onMouseOver on that element but it is maybe change your UI I suggest this code:

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

onmouseover show Message on React

2 Answers2