Home Tutorial Jquery Pop up on hover using jQuery plug in

 
 

Share on Google+Share on Google+
Pop up on hover using jQuery plug in
Posted on: August 6, 2010 at 12:00 AM
Advertisement
In this tutorial, we will learn how to set the pop up for display , when mouse hover on any unordered list.

Pop up on hover using jQuery plug in

In this tutorial, we will learn how to set the pop up for display , when mouse hover on any unordered list. For this purpose we are using plug-in "hovertip.js" . In this example , the unordered  list of three topics are given. When we hover on any , it displays a popup which have information about the topic ,  you can also link this text to any other website.

PoponHover.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Pop UP on Hover</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="hovertip.js"></script>
<script type="text/javascript">
// initialize tooltips in a seperate thread
$(document).ready(function() {
window.setTimeout(hovertipInit, 1);
});
</script>
<style type="text/css" media="all">@import "css/css.css";</style>
</head>
<body>
<h3><font color="red">Hover on any topiv to know about it</font>
</h3>
<div id="cloud">
<ul class="nav">
<li>
<a class="size1" href="#" id="j1">jQuery</a>
<ul style="display: block;" class="hovertip" target="j1">
<li><a class="size-sub3" href="#">jQuery is a lightweight cross-browser
 JavaScript library that emphasizes interaction between JavaScript and HTML
.</a></li>
</ul>
</li>
<li>
<a class="size1" href="#" id="j2">Jason</a>
<ul style="display: block;" class="hovertip" target="j2">
<li><a class="size-sub3" href="#">JSON is a lightweight text based open
standard designed for human-readable data interchange.</a></li>
</ul>
</li>
<li>
<a class="size1" href="#" id="j3">Ajax</a>
<ul style="display: block;" class="hovertip" target="j3">
<li><a class="size-sub3" href="#">Ajax is used on the client-side to create
 interactive web applications.</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

OUTPUT

When we hover on any topic:

Download Source Code

Click here to see demo

Advertisement

Related Tags for Pop up on hover using jQuery plug in:


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: August 6, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com