how to display div on mouseover on disabled button

Question

I have been working on the requirement that is to perform operations on a disabled button.I want to display a text on a disabled button, i tried in Jquery but its not working, below is the code which i tried.

$(function(){
    	$(window).on("load", function () {
    	$('#btn').prop("disabled", true);
      
    	$("#btn[disabled]").mouseover(function(){
    	  $(".main").css({ "display": "block" });
    	  
    	})
    	$("#btn[disabled]").mouseout(function(){
    	  $(".main").css({ "display": "none" });
    	})
    	});
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<button id="btn" disabled>Search</button>
    	<div class="main" style="display:none">
    		this is a div
    	</div>

Answer 1

You could do this with CSS instead like below:

#hiddenDiv { display: none; }
#btn[disabled]:hover + #hiddenDiv { display: block; }

<button id="btn" disabled>Search</button>
<div class="main" id="hiddenDiv">
    this is a div
</div>

What this is doing is initially setting hiddenDiv to display: none; and then on hover of the button it sets it to display: block;