Skip to content
Browse files

Per-tooltip classes

  • Loading branch information...
1 parent f556356 commit 602f2fe5c3869bc2dcf8ea3737685f1bea294bc4 @jaz303 committed Apr 23, 2011
Showing with 37 additions and 11 deletions.
  1. +32 −11 docs/src/index.html.erb
  2. +1 −0 docs/src/tipsy-docs.css
  3. +4 −0 src/javascripts/jquery.tipsy.js
View
43 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 -->
View
1 docs/src/tipsy-docs.css
@@ -3,3 +3,4 @@
#gravity a { }
#gravity a:hover { color: #505050; background: none; }
+.red .tipsy-inner { background: red; }
View
4 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,

0 comments on commit 602f2fe

Please sign in to comment.
Something went wrong with that request. Please try again.