From 602f2fe5c3869bc2dcf8ea3737685f1bea294bc4 Mon Sep 17 00:00:00 2001
From: Jason Frame <jason@onehackoranother.com>
Date: Sat, 23 Apr 2011 21:30:28 +0100
Subject: [PATCH] Per-tooltip classes

---
 docs/src/index.html.erb         | 43 ++++++++++++++++++++++++---------
 docs/src/tipsy-docs.css         |  1 +
 src/javascripts/jquery.tipsy.js |  4 +++
 3 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/docs/src/index.html.erb b/docs/src/index.html.erb
index 3abbff4..4e2bf09 100644
--- a/docs/src/index.html.erb
+++ b/docs/src/index.html.erb
@@ -154,6 +154,26 @@ an anchor tag's title attribute.</p>
 <div class='caption'>HTML example:</div>
 <div class='code'><pre>$('#example-html').tipsy({html: true });</pre></div>
 
+  <!-- Custom Classes -->
+
+  <h3>Custom Classes</h3>
+
+  <p>
+    This <code>className</code> option can be used to add extra CSS classes to generated
+    tooltips:
+  </p>
+  
+  <div class="caption">Custom class example:</div>
+  <div class="code"><pre>$('#example-custom-class').tipsy({className: 'red'});</pre></div>
+  
+  <p>
+    <a id='example-custom-class' title='tooltip with a the class "red"' href='#'>Try me out</a>
+  </p>
+  
+  <script type='text/javascript'>
+    $('#example-custom-class').tipsy({className: 'red'});
+  </script>
+
   <!-- Delay -->
   
   <h3>Show/Hide Delay</h3>
@@ -280,17 +300,18 @@ an anchor tag's title attribute.</p>
   <h2 id="options">Summary of Configuration Options</h2>
   <p>Here is the default options declaration:
   <div class='code'><pre>$.fn.tipsy.defaults = {
-    delayIn: 0,      // delay before showing tooltip (ms)
-    delayOut: 0,     // delay before hiding tooltip (ms)
-    fade: false,     // fade tooltips in/out?
-    fallback: '',    // fallback text to use when no tooltip text
-    gravity: 'n',    // gravity
-    html: false,     // is tooltip content HTML?
-    live: false,     // use live event support?
-    offset: 0,       // pixel offset of tooltip from element
-    opacity: 0.8,    // opacity of tooltip
-    title: 'title',  // attribute/callback containing tooltip text
-    trigger: 'hover' // how tooltip is triggered - hover | focus | manual
+    className: null,  // custom class to add to tooltip (string or function)
+    delayIn: 0,       // delay before showing tooltip (ms)
+    delayOut: 0,      // delay before hiding tooltip (ms)
+    fade: false,      // fade tooltips in/out?
+    fallback: '',     // fallback text to use when no tooltip text
+    gravity: 'n',     // gravity (string or function)
+    html: false,      // is tooltip content HTML?
+    live: false,      // use live event support?
+    offset: 0,        // pixel offset of tooltip from element
+    opacity: 0.8,     // opacity of tooltip
+    title: 'title',   // attribute/callback containing tooltip text
+    trigger: 'hover'  // how tooltip is triggered - hover | focus | manual
 };</pre></div>
   
   <!-- Notes -->
diff --git a/docs/src/tipsy-docs.css b/docs/src/tipsy-docs.css
index 4fc383c..aa9c680 100644
--- a/docs/src/tipsy-docs.css
+++ b/docs/src/tipsy-docs.css
@@ -3,3 +3,4 @@
   #gravity a { }
     #gravity a:hover { color: #505050; background: none; }
 
+.red .tipsy-inner { background: red; }
\ No newline at end of file
diff --git a/src/javascripts/jquery.tipsy.js b/src/javascripts/jquery.tipsy.js
index 8c2dcc9..8e71d2c 100644
--- a/src/javascripts/jquery.tipsy.js
+++ b/src/javascripts/jquery.tipsy.js
@@ -60,6 +60,9 @@
                 }
                 
                 $tip.css(tp).addClass('tipsy-' + gravity);
+                if (this.options.className) {
+                    $tip.addClass(maybeCall(this.options.className, this.$element[0]));
+                }
                 
                 if (this.options.fade) {
                     $tip.stop().css({opacity: 0, display: 'block', visibility: 'visible'}).animate({opacity: this.options.opacity});
@@ -173,6 +176,7 @@
     };
     
     $.fn.tipsy.defaults = {
+        className: null,
         delayIn: 0,
         delayOut: 0,
         fade: false,