If you're looking for a solution to create tooltips, consider using jQuery "tooltip". Here are some helpful resources:
Alternatively, if you prefer to build your own tooltip functionality with jQuery, you can achieve this by retrieving the title attribute of an element and appending it to a span when the hover event occurs.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.dropt').hover(function(){
var title = $(this).attr('title');
$(this).append('<span class="tooltip">'+title+'</span>');
},function(){
$('.tooltip',this).fadeOut('slow').remove();
});
});
</script>
<style>
.tooltip {
display:block;
padding:5px;
background:black;
color:white;
min-width:200px;
font-size:11px;
line-height:25px;
text-align:center;
position:absolute;
top:-50px;
border:none;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.dropt {
position:relative;
display:block;
cursor:pointer;
}
</style>
</head>
<body>
<br><br/>
<span class="dropt" title="Title for the pop-up">Hot Zone Text</span>
</body>
</html>