To create a simple popup box you need to use hover event or mouse over and mouse out event(actually what ever events you want), in my case I used jQuery mouse over event.  In this example I created a very simple div element with ID named  “popup”.

<style>

#popup{

width:100px;

height:80px;

border:solid 1px #666;

box-shadow: 5px 5px 5px #888888;

padding:5px;

display:none;

position:absolute;

}

</style>

 

Above is the style of the popup element, you can change it whenever you want, you can place it anywhere on the page just make sure that it is placed above your this code:

<button id=”hover-btn-id”>Hover Me</button>

<div id=”popup”>Simple Popup! </div>

 

Now, all our elements in our simple popup is created all we need to do is to make it functional with the use of jQuery plugin. 

Copy and paste the code below:

 

<script>

jQuery(‘#hover-btn-id’).mouseover(function(){

console.log(jQuery(this).position().left)

jQuery(‘#popup’).css({‘left’:(parseInt(jQuery(this).position().left) + 80) +’px’, ‘top’:jQuery(this).position().top +’px’}).show();

});

jQuery(‘#hover-btn-id, #popup’).mouseout(function(){

jQuery(‘#popup’).hide();

});

</script>

 

After completing everything above your simple popup should work!

 

Demo: 

Share on Google+Tweet about this on TwitterShare on FacebookShare on TumblrShare on StumbleUponPin on PinterestShare on LinkedInDigg thisShare on RedditEmail this to someone