Permalink
Browse files

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.
  • Loading branch information...
stuartloxton committed Oct 11, 2008
1 parent 7f99f13 commit 8c51b9c3d8f6cca593ea2eb59f8685273f3c9175
Showing with 29 additions and 17 deletions.
  1. +15 −3 demo/index.htm
  2. +14 −14 src/jtip.js
View
@@ -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>
View
@@ -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;
});
}

0 comments on commit 8c51b9c

Please sign in to comment.