JQuery div tooltip

Here is my small script for Jquery tooltip that will popup on div hover. It’s very easy for implement and it can be used for one div but also for as many as you want, same as for tables made in divs.

You can check demo here.

HTML

 

HTML   
<div class="tooltip-target">target 1
<div class="example-content">Example of tooltip content for box 1.</div>
</div><!-- .tooltip-target -->

 

jQuery

Jquery script that goes in < head > (including Jquery library)

jQuery   
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".tooltip-target").mouseenter(function(e){
    e.preventDefault();
    $(this).children(".example-content").fadeIn("slow");
});
$(".tooltip-target").mouseleave(function(e){
    e.preventDefault();
    $(this).children(".example-content").fadeOut("fast");
});
});
</script>

CSS

CSS style

CSS   
.example-content {
    position:absolute;
    bottom: 50px;
    left: 50px;
    height: auto;
    width: 100px;
    background:#2E3732;
	color: #FFFFFF;
    display:none;
	text-shadow: none;
	z-index: 1000;
	padding: 20px;
	line-height: 19px;
	text-align: justify;
	opacity: 0.8;
}
 
.tooltip-target {
  display: block; /* required */
  position: relative; /* required */
}
Facebooktwittergoogle_plusredditpinterestlinkedinmail

Leave a Reply

Your email address will not be published. Required fields are marked *