Jquery ToolTip
January 20th, 2010
No comments
I just found a very nice ToolTip that can be implemented in almost no time.
You Just require two Js file
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.min.js"></script>//Core JQuery Library <script type="text/javascript" src="http://static.flowplayer.org/js/tools/1.1.2/all/jquery.tools.min.js?v=1"></script>//For tooltip
You’ll need to have this style for tip
div.tooltip {
background-color:#000;
border:1px solid #fff;
padding:10px 15px;
width:200px;
display:none;
color:#fff;
text-align:left;
font-size:12px;
/* outline radius for mozilla/firefox only */
-moz-box-shadow:0 0 10px #000;
-webkit-box-shadow:0 0 10px #000;
}
HTML code
<form id="myform" action="#"> <h3>Registration Form</h3> <div id="inputs"> <label for="username">Username</label> <input id="username" title="Must be at least 8 characters."/><br /> <label for="body">Message</label> <textarea id="body" title="What's on your mind?"></textarea><br /> <label for="where">Select one</label> <select id="where" title="Select one of these options"> <option>-- first option --</option> <option>-- second option --</option> <option>-- third option --</option> </select> <br /> </div> <label> I accept the terms and conditions <input type="checkbox" id="check" title="Required to proceed" /> </label> <p> <button type="button" title="This button won't do anything">Proceed</button> </p> </form>
Don’t Forget to add below div in body (anywhere)
<div class="tooltip"></div>
And now finally bind your form input elements with ToolTip
<SCRIPT LANGUAGE="JavaScript">
<!--
$(document).ready(function() {
// select all desired input fields and attach tooltips to them
$("#myform :input").tooltip({
// place tooltip on the right edge
position: "center right",
// a little tweaking of the position
offset: [-2, 10],
// use the built-in fadeIn/fadeOut effect
effect: "fade",
// custom opacity setting
opacity: 0.7,
// use this single tooltip element
tip: '.tooltip'
});
});
//-->
</SCRIPT>
Now click on any of input box from your form.
Recent Comments