Pop up on hover using jQuery plugin

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

Leave a comment