You can now set what events should show and hide the tooltip. Demo il…

…lustrates this by when focusing on input you get tooltip, blur removes it.
stuartloxton · Oct 11, 2008 · 8c51b9c · 8c51b9c
1 parent 7f99f13
commit 8c51b9c
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 17 deletions.
diff --git a/demo/index.htm b/demo/index.htm
@@ -10,13 +10,17 @@
 @import "../src/jtip.css";
 </style>
 
-<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
+<script src="../src/jquery.js" type="text/javascript"></script>
 <script src="../src/jtip.js" type="text/javascript"></script>
 
 <script type="text/javascript" charset="utf-8">
 	jQuery(function() {
 		jQuery.jTipPreloadJSON('json.js');
 		jQuery('a.jTip').jTipOn('href');
+		jQuery('input').jTipOn('rel', {
+			showOn: 'focus',
+			hideOn: 'blur'
+			});
 		jQuery('a.jTipRel').jTipOn('rel');
 		//console.log(jTip2.downloaded['json.js']);
 	});
@@ -32,12 +36,14 @@
 
 <p><strong>Roll over a question mark:</strong></p>
 
-<label style="padding-right:5px">Password</label><input name="" type="text" /><span class="formInfo"><a href="ajax.htm?width=375" class="jTip" name="Password must follow these rules:">?</a></span>
+<label style="padding-right:5px">Password</label>
+	<input rel="#jt_password" name="password" type="text" />
 
 <br />
 <br />
 
-<label style="padding-right:5px">User ID</label><input name="" type="text" /><span class="formInfo"><a href="ajax2.htm?width=475" class="jTip" id="two" name="">?</a></span>
+<label style="padding-right:5px">User ID</label>
+	<input rel="#jt_user" name="user_id" type="text" />
 
 <p><strong>Now supports <a href=":json.js:examples:json" class="jTip">JSON tooltips</a>&hellip; here is <a href=":json.js:examples:secondTip" class="jTip">another tip</a> from the same page.</strong>
 
@@ -58,5 +64,11 @@
 <div id="inlineWhatis" style="display: none">
 	This is an updated version of Cody Lindleys jTip
 </div>
+<div id="jt_password" style="display: none">
+	Password must be awesome!
+</div>
+<div id="jt_user" style="display: none">
+	User ID must be numerical.
+</div>
 </body>
 </html>
diff --git a/src/jtip.js b/src/jtip.js
@@ -11,11 +11,7 @@
 //on page load (as soon as its ready) call JT_init
 
 jTip2 = {
-	show: function(reference, url, options) {
-		settings = jQuery.extend({
-			fadeIn: 2000,
-			fadeOut: 1000
-		}, options);
+	show: function(reference, url, settings) {
 		title = reference.name;
 		if(title == false) title="&nbsp;";
 		var de = document.documentElement;
@@ -98,16 +94,21 @@ jTip2 = {
 }
 
 jQuery.fn.jTipOn = function(x, options) {
+	settings = jQuery.extend({
+			showOn: 'mouseover',
+			hideOn: 'mouseout',
+			fadeIn: 2000,
+			fadeOut: 1000
+		}, options);
 	this.each(function() {
 		$obj = jQuery(this);
-		$obj.hover(function() {
-			if(jTip2.needsDeleting) {
-				jQuery('#JT').remove();
-				jTip2.needsDeleting = false;
-			}
-			jTip2.show(this, jQuery(this).attr(x), options);
-		}, function() {
-			jTip2.hide();
+		$obj.bind(settings.showOn, function() {
+			jQuery('#JT').remove();
+			jTip2.needsDeleting = false;
+			jTip2.show(this, jQuery(this).attr(x), settings);
+		});
+		$obj.bind(settings.hideOn, function() {
+			jTip2.hide();	
 		});
 	});
 }
@@ -118,7 +119,6 @@ jQuery.jTipPreloadURL = function(url) {
 }
 jQuery.jTipPreloadJSON = function(url) {
 	jQuery.getJSON(url, function(data) {
-		console.log('jTip2.downloaded['+url+']');
 		jTip2.downloaded[url] = data;
 	});
 }