How to display div on mouse on disabled button

Question

I worked on a requirement that must perform operations with a disabled button. I want to display text on a disabled button, I tried it in jQuery, but it doesn’t work, below is the code 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>

Run codeHide result

Answer 1

You can do this with CSS, as shown 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>

Run codeHide result

What this does is initially set hiddenDivto display: none;, and then when hovering over buttonit sets the valuedisplay: block;

Answer 2

Disabling buttons means disabling their interactivity. Although this is a different approach, you can achieve the desired effect using CSS for browser speed.

button[disabled] + .main {
    display: none;
}

button[disabled]:hover + .main {
    display: block;
}

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

Run codeHide result

Answer 3

:

In HTML, disabledelements do not trigger an event and do not respond to user actions, they are simply displayed with gray text.

The MDN specification is disabled :

If an element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.

Decision:

Why don't you just use the title attribute title="this is a div"?!

<button id="btn" title="this is a div" disabled>Search</button>

Here is a simple demo fragment:

<button id="btn" title="this is a div" disabled>Search</button>

Run codeHide result