OPEN DIALOG WITH SET POSITION CURSOR

OPEN DIALOG WITH SET POSITION CURSOR

by Adi Jaya

HTML

<h2>OPEN DIALOG WITH SET POSITION CURSOR</h2>

<div class="container">
  <a class='tes' data-hover="satu" href="#">HOVER ME</a> <br/>
  <a class='tes' data-hover="dua" href="#">HOVER ME 2</a> <br/>
</div>

<div class="dialog hidden" data-dialog="satu">
<h2>Dialog 11111111111111</h2>
</div>

<div class="dialog hidden" data-dialog="dua">
<h2>Dialog 22222222222222222</h2>
</div>

CSS

.container{
  width :80%;
  height :200px;
  background:beige;
  border :3px dashed red;
  padding : 15px;
  margin-top: 25px
}
.dialog {
    position: absolute;
    padding: 15px;
    width: 225px;
    background: crimson;
}
.show {
  display : block !important;
}
.hidden {
  display : none !important;
}

JavaScript

$(function(){
//this variable for class
var on ="show",
		off = "hidden";

	$("[data-hover='satu']").on('mouseenter', function(e) {
		$("[data-dialog='satu']").css({top: e.pageY+10,left: e.pageX}).removeClass(off).addClass(on);
	});
  
	$("[data-hover='satu']").on('mouseout', function(e) {
		$("[data-dialog='satu']").removeClass(on).addClass(off);
	});

	//part 2
  $("[data-hover='dua']").on('mouseenter', function(e) {
		$("[data-dialog='dua']").css({top: e.pageY+10,left: e.pageX}).removeClass(off).addClass(on);
	});
  
	$("[data-hover='dua']").on('mouseout', function(e) {
		$("[data-dialog='dua']").removeClass(on).addClass(off);
	});

});