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

[codesyntax lang=”html4strict” title=”HTML”]

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

[/codesyntax]

jQuery

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

[codesyntax lang=”javascript” title=”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>

[/codesyntax]

CSS

CSS style

[codesyntax lang=”css” title=”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 */
}

[/codesyntax]