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>
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>
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>