Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Per-tooltip classes
  • Loading branch information
jaz303 committed Apr 23, 2011
1 parent f556356 commit 602f2fe
Show file tree
Hide file tree
Showing 3 changed files with 37 additions and 11 deletions.
43 changes: 32 additions & 11 deletions docs/src/index.html.erb
Expand Up @@ -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>
Expand Down Expand Up @@ -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 -->
Expand Down
1 change: 1 addition & 0 deletions docs/src/tipsy-docs.css
Expand Up @@ -3,3 +3,4 @@
#gravity a { }
#gravity a:hover { color: #505050; background: none; }

.red .tipsy-inner { background: red; }
4 changes: 4 additions & 0 deletions src/javascripts/jquery.tipsy.js
Expand Up @@ -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});
Expand Down Expand Up @@ -173,6 +176,7 @@
};

$.fn.tipsy.defaults = {
className: null,
delayIn: 0,
delayOut: 0,
fade: false,
Expand Down

0 comments on commit 602f2fe

Please sign in to comment.