in hover jquery

by lemon kazi

HTML

<div class="hint"> ?
<div class="desc">
This is supposed to appear on hover
This is supposed to appear on hover
This is supposed to appear on hover
This is supposed to appear on hover
<button type="button">
Click me
</button></div>


</div>

CSS

.hint {
padding: 20px;
background: white;
width: 10px;
height: 10px;
border-radius: 50%;
}


.desc {
    display: none;
    width: 200px;
    background: white;
    z-index: 3;
    border: 1px solid #CCC;
    border-radius: 3px;
    top: 20px;
    left: -5px;
    padding: 12px;
    color: #666;
    font-size: 12px;
}

JavaScript

$(document).ready(function() {
	
  var hint = $('.hint');
  var desc = $('.desc');
  
  hint.mouseenter(function() {
  	desc.show();
  });
  
   hint.mouseleave(function() {
  	desc.hide();
  });
});