<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Php Mysql &#187; ToolTip</title>
	<atom:link href="http://phpmysql.co.in/tag/tooltip/feed/" rel="self" type="application/rss+xml" />
	<link>http://phpmysql.co.in</link>
	<description>My experience with Open Source Technologies - VINOD</description>
	<lastBuildDate>Thu, 24 Nov 2011 13:44:32 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Jquery ToolTip</title>
		<link>http://phpmysql.co.in/jquery/tooltip/</link>
		<comments>http://phpmysql.co.in/jquery/tooltip/#comments</comments>
		<pubDate>Wed, 20 Jan 2010 12:27:39 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[JQuery]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[ToolTip]]></category>

		<guid isPermaLink="false">http://phpmysql.co.in/?p=208</guid>
		<description><![CDATA[I just found a very nice ToolTip that can be implemented in almost no time. You Just require two Js file &#60;script type="text/javascript"    src="http://code.jquery.com/jquery-1.4.min.js"&#62;&#60;/script&#62;//Core JQuery Library &#60;script type="text/javascript"    src="http://static.flowplayer.org/js/tools/1.1.2/all/jquery.tools.min.js?v=1"&#62;&#60;/script&#62;//For tooltip You&#8217;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 [...]]]></description>
			<content:encoded><![CDATA[<p>I just found a very nice ToolTip that can be implemented in almost no time.</p>
<p>You Just require two Js file</p>
<pre name="code" class="html">
&lt;script type="text/javascript"    src="http://code.jquery.com/jquery-1.4.min.js"&gt;&lt;/script&gt;//Core JQuery Library
&lt;script type="text/javascript"    src="http://static.flowplayer.org/js/tools/1.1.2/all/jquery.tools.min.js?v=1"&gt;&lt;/script&gt;//For tooltip
</pre>
<p>You&#8217;ll need to have this style for tip</p>
<pre name="code" class="css">
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;
}
</pre>
<p><strong>HTML code </strong></p>
<pre name="code" class="html">
&lt;form id="myform" action="#"&gt;
&lt;h3&gt;Registration Form&lt;/h3&gt;
&lt;div id="inputs"&gt;
&lt;label for="username"&gt;Username&lt;/label&gt;
&lt;input id="username" title="Must be at least 8 characters."/&gt;&lt;br /&gt;
&lt;label for="body"&gt;Message&lt;/label&gt;
&lt;textarea id="body" title="What's on your mind?"&gt;&lt;/textarea&gt;&lt;br /&gt;
&lt;label for="where"&gt;Select one&lt;/label&gt;
&lt;select id="where" title="Select one of these options"&gt;
&lt;option&gt;-- first option --&lt;/option&gt;
&lt;option&gt;-- second option --&lt;/option&gt;
&lt;option&gt;-- third option --&lt;/option&gt;
&lt;/select&gt;
&lt;br /&gt;
&lt;/div&gt;
&lt;label&gt;
I accept the terms and conditions
&lt;input type="checkbox" id="check" title="Required to proceed" /&gt;
&lt;/label&gt;
&lt;p&gt;
&lt;button type="button" title="This button won't do anything"&gt;Proceed&lt;/button&gt;
&lt;/p&gt;
&lt;/form&gt;
</pre>
<p><strong>Don&#8217;t Forget to add below div in body (anywhere)</strong></p>
<pre name="code" class="html">
&lt;div class="tooltip"&gt;&lt;/div&gt;
</pre>
<p>And now finally bind your form input elements with ToolTip</p>
<pre name="code" class="javascript">
&lt;SCRIPT LANGUAGE="JavaScript"&gt;
&lt;!--
$(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'
});
});
//--&gt;
&lt;/SCRIPT&gt;
</pre>
<p>Now click on any of input box from your form. <img src='http://phpmysql.co.in/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://phpmysql.co.in/jquery/tooltip/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

