Here I have tried to create Facebook style tootip with the help of Jquery. I found it very easy to develop this script and only three functions did the job. One function calculates the positon of the tooltip, second one dissplays the tooltip and the third one hides it. The script is very simple and you will easily get through it.
Please write to me your suggestions or experience for this tutorial…
Code :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>WebSpeaks.in</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Position the tooltip.
var positionTooltip = function(event)
{
/* Get cursor positions */
var tPosX = event.pageX + 8;
var tPosY = event.pageY - 20;
/* Set tooltip positions */
$('div.tooltip').css({top: tPosY, left: tPosX});
};
// Show (create) the tooltip.
var showTooltip = function(event)
{
$('div.tooltip').remove(); /* Remove previous tooltip to avoid flicker */
var text = $(this).text();
$('<div class="tooltip">Click to see : '+text+' </div>').appendTo('body');
$('.tooltip').css({'opacity':'0.8'}); /* Set the opacity */
positionTooltip(event);
$(this).css({'backgroundColor':"#ececec"});
};
// Hide (remove) the tooltip.
var hideTooltip = function()
{
$('div.tooltip').remove();
$(this).css({'backgroundColor':"#CFFCF8"});
};
$('div.data').hover(showTooltip, hideTooltip).mousemove(positionTooltip);
});
</script>
<style>
.body{
margin:0px 20% 0px 20%;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
.body a{
color:#993366;
text-decoration:none;
}
.main{
border:1px solid #ececec;
width:300px;
padding:5px;
}
.data{
background-color:#CFFCF8;
margin:12px 2px 2px 2px;
padding:4px 10px 2px 10px;
}
.heading{
background-color:#2859AA;
border:1px solid #121649;
color:#FFFFFF;
font-weight:bold;
font-size:14px;
padding:3px;
text-align:center;
}
.tooltip {
background-color:#000000;
color:#FFFFFF;
font-family:Tahoma;
font-size:11px;
position: absolute;
z-index: 2;
border: 1px solid #ccc;
padding: 3px;
}
</style>
</head>
<body>
<div class="body">
<div class="main">
<div class="heading">Facebook Like ToolTip with Jquery.</div>
<div class="data">
<a href="http://www.webspeaks.in/2010/05/facebook-like-profile-edit-with-jquery.html" target="_blank">
FaceBook Like profile edit with Jquery.
</a>
</div>
<div class="data">
<a href="http://www.webspeaks.in/2010/05/text-style-switcher-with-jquery.html" target="_blank">
Text style-switcher with Jquery.
</a>
</div>
<div class="data">
<a href="http://www.webspeaks.in/2010/05/facebook-like-comment-post-with-jquery.html" target="_blank">
FaceBook Like comment post with Jquery.
</a>
</div>
<div class="data">
<a href="http://www.webspeaks.in/2010/04/register-form-script-with-jquery.html" target="_blank">
Register form script with Jquery.
</a>
</div>
</div>
</div>
</body>
</html>
