Jquery for Tooltip

There is simple example shows for the tooltip. This example generally for the jquery beginner. This initial example after this you can be modify this to our basic purposes. The tooltip is use for in various part of the website.

1. In forms on the elements

2. On the href Url

 

Now we start the code

Step 1 : Put the below query files in the head section of the html file.

<html>
<head>
<meta charset=”utf-8″ />
<title>Jquery Tooltip</title>
<link rel=”stylesheet” href=”http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css&#8221; />
<script src=”http://code.jquery.com/jquery-1.8.2.js”></script&gt;
<script src=”http://code.jquery.com/ui/1.9.0/jquery-ui.js”></script&gt;
<link rel=”stylesheet” href=”/resources/demos/style.css” />

</head>

Step 2 : Now need to put the script for execution of the  tooltip on mouse over.

<script>
$(function() {
$(“#demo”).tooltip();
});
</script>

Presently it’s script for the working on the demo div. If you want the put tooltip on complete file then just put the document in instead of demo $(“#demo”).tooltip();  -> $(document).tooltip();

 

Step 3 : Now putting the final html code.

</head>
<body>
<div id=”demo” style=”width:500px”>
<p><a href=”#” title=”That’s what this widget is”>For Test mouse Over me</a>
<p><label for=”age”Your age:</label><input id=”age” title=”We ask for your age only for statistical purposes.” /></p>

</div>
</body>
</html>

 

Now Final code

<!doctype html>

<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<title>Jquery Tooltip</title>
<link rel=”stylesheet” href=”http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css&#8221; />
<script src=”http://code.jquery.com/jquery-1.8.2.js”></script&gt;
<script src=”http://code.jquery.com/ui/1.9.0/jquery-ui.js”></script&gt;
<link rel=”stylesheet” href=”/resources/demos/style.css” />
<script>
$(function() {
$(“#demo”).tooltip();
});
</script>

</head>
<body>
<div id=”demo” style=”width:500px”>
<p><a href=”#” title=”That’s what this widget is”>For Test mouse Over me</a>
<p><label for=”age”Your age:</label><input id=”age” title=”We ask for your age only for statistical purposes.” /></p>

</div>
</body>
</html>

 

Result Screen Shot

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

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