Animated Tooltip Using jQuery

Login Form

Its another tooltip sourcecode using jQuery. You can copy paste the sourcecode from here. It is a span based tooltip, with animation. The Jquery effects used here are as..

$(".tbox").focusin(function() {

	$(this).next("span").show(1000);

});
$(".tbox").focusout(function() {

	$(this).next("span").hide(1000);

});

Here is the complete sourcecode.

<!DOCTYPE html>
<html>
<head>
<title>Animated Tooltip</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
body
{
margin:0;
padding:0;
font-family:Trebuchet MS;
text-shadow:#000;
color:gray;
}

#container
{
	margin:10px;
	border-color: #DDDDDD #DDDDDD #CCCCCC;
    border-radius:5px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 1px 3px rgba(0, 0, 0, 0.1);
	width:500px;
	height:300px;
	padding:10px;
}

#container .label_1
{
	clear: both;
    height: 38px;
    margin: 10px 0 20px 10px;
    width: 500px;
}

#container .label_1 .txt
{
	margin:0 10px 0 30px;
	width:82px;
	float:left;
}

.txt_head
{ width:300px;}

.help_text
{
clear:both;
font-size:10px;
margin:0 10px 0 30px;
}

.tooltip
{
display:none;
background:yellow;
padding:2px;
float:left;
height:15px;
font-size:11px;
}

.tbox{float:left;}
</style>
</head>
<body>

<div id="container">
	<div class="label_1">
		<div class="txt_head"><b>User Sign-Up Form</b></div>

	</div>
	<div class="label_1">
		<div class="txt">Your Name</div>
		<input type="text" class="tbox"><span class="tooltip">Enter Your Name</span>
		<div class="help_text">Enter Your Name Here</div>
	</div>
	<div class="label_1">
		<div class="txt">Username</div>
		<input type="text" class="tbox"><span class="tooltip">Enter Your Username</span>
		<div class="help_text">Enter Your Username Here</div>
	</div>
	<div class="label_1">
		<div class="txt">Email ID</div>
		<input type="text" class="tbox"><span class="tooltip">Enter Your Email ID</span>
		<div class="help_text">Enter Your Email ID Here</div>
	</div>
</div>
<script>
$(".tbox").focusin(function() {

	$(this).next("span").show(1000);

});
$(".tbox").focusout(function() {

	$(this).next("span").hide(1000);

});

</script>
</body>
</html>

Hope it will help you.

Thanks,
Nikhil Ughade
(WEB DeSigNer)
Pune,IN

Nikhil on Deviant Art
http://designikx.deviantart.com
Art – community of artists and those devoted to art. Digital art, skin art, themes, wallpaper art, traditional art, photography, poetry / prose. Art prints.

Nikhil on Twitter
https://twitter.com/0nikhil

Advertisements

About Nikhil
Name : Nikhil Ughade UI Developer, Accidentally in design field, no turn back since then. Location : Pune (MH, INDIA) From : Amravati (MH,INDIA) College : VYWS's College Of Engg. Badnera, Amravati Hobby : Social Networking, Designing Web Sites, Photography, Reading Books. In Free time works for NGO.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: