JQuery is an Art of JavaScript and CSS.
This tip/trick will show you
a. Show an animated tool tip
b. Add attributes using script.
Step 1:
Add the script tag with the required jQuery file in src attribute
Ex:
<script type="text/javascript" src="jquery.js"></script>
Step 2:
Create required styles in the page or add the CSS file in the page.
Ex:
<style>
body
{
margin: 0px auto;
font: 80%/120% Arial, Helvetica, sans-serif;
}
.m2
{
margin: 100px 0 0;
padding: 0;
list-style: none;
}
.m2 li
{
padding: 0;
margin: 0 2px;
float: left;
position: relative;
text-align: center;
}
.m2 a
{
padding: 14px 10px;
display: block;
width: 144px;
color: #000000;
text-decoration: none;
font-weight: bold;
background: smokewhite no-repeat center center;
}
.m2 li div
{
font-weight: normal;
background: #BFBF6A;
width: 180px;
height: 45px;
position: absolute;
top: -85px;
left: -15px;
text-align: center;
padding: 20px 12px 10px;
font-style: normal;
z-index: 2;
display: none;
}
.h
{
background: blue;
color: white;
}
.search
{
width: 100%;
padding: 20px;
text-align: center;
}
.search #txtSearch
{
width: 200px;
border: solid 1px green;
padding: 2px;
}
</style>
Step 3:
Create the required
div
,
ul
and
li
tags as per requirement.
<div>
<ul class="m2">
<li>
<a href="http://yahoo.com" title="Yahoo">Yahoo</a>
</li>
<li>
<a href="http://www.google.com" title="My Favourite Search engine">
Google</a>
</li>
<li>
<a href="http://www.codeproject.com/m-premraj/" title="Find Me">
Find me</a>
</li>
</ul>
<div class='search'>
<input type='text' id='txtSearch' /><img id='imgSearch' /></div>
</div>
Step 4:
This is very important step and last one. Add some JavaScript which is given below
<script type="text/javascript">
$(document).ready(function(){
$(".m2 a").append("<div></div>");
$("#imgSearch").attr("src","search.jpg");
$(".m2 a").hover(function() {$(this).find("div").animate({opacity: "show", top: "-55"},
"slow");var hoverText = $(this).attr("title");
$(this).find("div").text(hoverText);},
function() {$(this).find("div").animate({opacity: "hide", top: "-10"}, "fast");
});
});
</script>
Have a
HAPPY CODING ART.