Archive

Posts Tagged ‘ToolTip’

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. :)

Categories: JQuery Tags: , ,