support for live events. bump jquery version for docs. doc example bo…

…xes restyled.
laszlopapp · Apr 27, 2010 · 1884b29 · 1884b29
1 parent fd1947b
commit 1884b29
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 24 deletions.
diff --git a/docs/src/index.html.erb b/docs/src/index.html.erb
@@ -157,7 +157,7 @@ an anchor tag's title attribute.</p>
   </p>
 
   <div class='caption'>Dynamic updating example:</div>
-  <div id='dynamic-example' class='flash'>
+  <div id='dynamic-example' class='example'>
     <a href='#' rel='tipsy' title=''>Hover over me</a> |
     New tooltip text:
     <input type='text' value='' size='10' />
@@ -175,7 +175,7 @@ an anchor tag's title attribute.</p>
   <p>It's possible to disable hover events and instead trigger tooltips manually:</p>
 
   <div class='caption'>Manual triggering example:</div>
-  <div id='manual-example' class='flash'>
+  <div id='manual-example' class='example'>
     <a rel='tipsy' title='Well hello there'>My tooltip is manually triggered</a> |
     <a href='#' onclick='$("#manual-example a[rel=tipsy]").tipsy("show"); return false;'>Show it</a> |
     <a href='#' onclick='$("#manual-example a[rel=tipsy]").tipsy("hide"); return false;'>Hide it</a>
@@ -195,7 +195,31 @@ an anchor tag's title attribute.</p>
   &lt;script type=&#x27;text/javascript&#x27;&gt;
     $(&#x27;#manual-example a[rel=tipsy]&#x27;).tipsy({trigger: &#x27;manual&#x27;});
   &lt;/script&gt;</pre>
-
+
+  <!-- Live Events Support -->
+
+  <h3>Support for Live Events</h3>
+
+  <p>
+    Live events are supported using the option <code>{live: true}</code>.
+    jQuery &ge; 1.4.1 is required and live tooltips do not support manual triggering.
+  </p>
+
+  <div class='caption'>Live events example:</div>
+  <div id='live-example' class='example'>
+    <div id='live-template' style='display:none'><a href='#' class='live-tipsy' title='A tooltip'>Dynamic tooltip</a></div>
+    <input type='button' value='Add' onclick='$("#live-example").append($("#live-template").clone().attr("id", "").show());' /><br />
+  </div>
+
+  <script type='text/javascript'>
+    $('a.live-tipsy').tipsy({live: true});
+  </script>
+
+  <div class='caption'>Code for live events:</div>
+  <pre class='code'>&lt;script type=&#x27;text/javascript&#x27;&gt;
+  $(&#x27;a.live-tipsy&#x27;).tipsy({live: true});
+&lt;/script&gt;</pre>
+
   <!-- Options -->
 
 
@@ -209,6 +233,7 @@ an anchor tag's title attribute.</p>
         fallback: '',
         gravity: 'n',
         html: false,
+        live: false,
         opacity: 0.8,
         title: 'title',
         trigger: 'hover'

diff --git a/docs/src/project.yml b/docs/src/project.yml
@@ -1,7 +1,7 @@
 project:
     title: "tipsy"
     subtitle: "Facebook-style tooltip plugin for jQuery"
-    jquery_version: "1.3.2"
+    jquery_version: "1.4.2"
     main_nav:
         - ["Overview", "#overview"]
         - ["Examples & Usage", "#examples"]

diff --git a/src/javascripts/jquery.tipsy.js b/src/javascripts/jquery.tipsy.js
@@ -98,35 +98,56 @@
     $.fn.tipsy = function(options) {
 
         if (options === true) {
-            return this.eq(0).data('tipsy');
+            return this.data('tipsy');
         } else if (typeof options == 'string') {
-            return this.eq(0).data('tipsy')[options]();
+            return this.data('tipsy')[options]();
         }
 
         options = $.extend({}, $.fn.tipsy.defaults, options);
 
-        this.each(function() { $.data(this, 'tipsy', new Tipsy(this, options)); });
+        function get(ele) {
+            var tipsy = $.data(ele, 'tipsy');
+            if (!tipsy) {
+                tipsy = new Tipsy(ele, options);
+                $.data(ele, 'tipsy', tipsy);
+            }
+            return tipsy;
+        }
+
+        function enter() {
+            var tipsy = get(this);
+            tipsy.hoverState = 'in';
+            if (options.delayIn == 0) {
+                tipsy.show();
+            } else {
+                setTimeout(function() { if (tipsy.hoverState == 'in') tipsy.show(); }, options.delayIn);
+            }
+        };
+
+        function leave() {
+            var tipsy = get(this);
+            tipsy.hoverState = 'out';
+            if (options.delayOut == 0) {
+                tipsy.hide();
+            } else {
+                setTimeout(function() { if (tipsy.hoverState == 'out') tipsy.hide(); }, options.delayOut);
+            }
+        };
+
+        if (!options.live) {
+            this.each(function() { $.data(this, 'tipsy', new Tipsy(this, options)) });
+        }
 
         if (options.trigger == 'hover') {
-            this.hover(function() {
-                var tipsy = $.data(this, 'tipsy');
-                tipsy.hoverState = 'in';
-                if (options.delayIn == 0) {
-                    tipsy.show();
-                } else {
-                    setTimeout(function() { if (tipsy.hoverState == 'in') tipsy.show(); }, options.delayIn);
-                }
-            }, function() {
-                var tipsy = $.data(this, 'tipsy');
-                tipsy.hoverState = 'out';
-                if (options.delayOut == 0) {
-                    tipsy.hide();
-                } else {
-                    setTimeout(function() { if (tipsy.hoverState == 'out') tipsy.hide(); }, options.delayOut);
-                }
-            });
+            if (options.live) {
+                this.live('mouseenter', enter).live('mouseleave', leave);
+            } else {
+                this.hover(enter, leave);
+            }
         }
 
+        return this;
+
     };
 
     $.fn.tipsy.defaults = {
@@ -136,6 +157,7 @@
         fallback: '',
         gravity: 'n',
         html: false,
+        live: false,
         opacity: 0.8,
         title: 'title',
         trigger: 'hover'