This type of tooltip can be generated in different ways.We will see all of them later.
To create Tooltip you have to download Jquery tooltip Plugin from:
Download ToolTip Plugin
Select Development and Jquery check boxes. Thats enough to keep tooltip working. Thats what I prefer but you can download all :).
Now you will be able to see "jquery.qtip-1.0.0-rc3.custom.zip" compressed file in your download folder. Extract it -> Open it. Here you will find following files.
- jquery-1.3.2.min.js -> Compressed Jquery File
- jquery.qtip-1.0.0-rc3.min.js -> Compressed Plugin File.
- jquery.qtip-1.0.0-rc3.js -> Main Tooltip Plugin file.
- INSTALL -> File for install instructions
- REQUIREMENTS ->File to tell you abut the requirement of the tooltip to run.
- LICENSE-> Licence Agreement file.
Now Create a html file with following code and save it in the same folder where other six downloaded files exists....
<html>
<head>
<title>
jQuery Tooltip Plugin
</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.qtip-1.0.0-rc3.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#computercurry a[href][title]').qtip({
content: {
text: false
},
style: 'dark'
});
});
</script>
</head>
<body>
<h1 style="{ padding: 15px; background-color: #96b; color: white; font-size: large; border-bottom: 1px solid #ccc; text-align: center }"><a href="http://computercurry.blogspot.com/" style="color:white">jQuery Tooltip Plugin</a></h1>
<fieldset id="computercurry">
<legend>Using bodyHandler to display footnotes in the tooltip</legend>
<a href="http://computercurry.blogspot.com/" title="This is the link to 'Computer Curry' Blog">Move your mouse to this link</a>
</fieldset>
</body>
Now you can see it is Displaying tool tip in new format when you move your cursor on LINK.
Now, Some Good thing to know you can alter the way tooltip appears. By default it is "dark" but u can change it to other styles too... like "green", "blue", "red", "dark" and "cream". what you need to do is just change the value of "style: 'dark'" to "style: 'blue'" or any color from this list and see the magic.
Now you only need to do is keep experimenting and see you alter it. Also this tooltip can be applied to all html tags that supports "title" parameter. ;) Do experiment and know how?
Waiting for your comments....
No comments:
Post a Comment