Skip to content
This repository has been archived by the owner on Feb 21, 2023. It is now read-only.

Commit

Permalink
docs updated again
Browse files Browse the repository at this point in the history
  • Loading branch information
@jaz303
jaz303 committed May 3, 2010
1 parent c28076e commit 69ef830
Show file tree
Hide file tree
Showing 2 changed files with 26 additions and 26 deletions.
50 changes: 25 additions & 25 deletions docs/src/index.html.erb
View file
Expand Up @@ -33,7 +33,7 @@ an anchor tag's title attribute.</p>
</p>

<div class='caption'>Basic example:</div>
<pre class='code'>$('#example-1').tipsy();</pre>
<div class='code'><pre>$('#example-1').tipsy();</pre></div>

<h3>Gravities</h3>

Expand Down Expand Up @@ -87,7 +87,7 @@ an anchor tag's title attribute.</p>
</script>

<div class='caption'>Gravity example:</div>
<pre class='code'>$('#foo').tipsy({gravity: 'n'}); // nw | n | ne | w | e | sw | s | se</pre>
<div class='code'><pre>$('#foo').tipsy({gravity: 'n'}); // nw | n | ne | w | e | sw | s | se</pre></div>

<p>As of version 0.1.3, it's possible to use a callback function to set the gravity dynamically at hover-time. Within the callback, <code>this</code> refers to the active element, and the function should return the calculated gravity as a string. Two demo callbacks are supplied - <code>$.fn.tipsy.autoNS</code> and <code>$.fn.tipsy.autoWE</code> - which select north/south and west/east gravity, respectively, based on the element's location in the viewport.</p>

Expand All @@ -96,7 +96,7 @@ an anchor tag's title attribute.</p>
<a id='auto-gravity' href='#' title='This as an example of dynamic gravity'>Dynamic Gravity</a>

<div class='caption'>Dynamic gravity example:</div>
<pre class='code'>$('#foo').tipsy({gravity: $.fn.tipsy.autoNS});</pre>
<div class='code'><pre>$('#foo').tipsy({gravity: $.fn.tipsy.autoNS});</pre></div>

<h3>Fading</h3>

Expand All @@ -107,7 +107,7 @@ an anchor tag's title attribute.</p>
</p>

<div class='caption'>Fade example:</div>
<pre class='code'>$('#example-fade').tipsy({fade: true});</pre>
<div class='code'><pre>$('#example-fade').tipsy({fade: true});</pre></div>

<h3>Bonus Feature</h3>

Expand All @@ -122,7 +122,7 @@ an anchor tag's title attribute.</p>
</p>

<div class='caption'>Custom attribute example:</div>
<pre class='code'>$('#example-custom-attribute').tipsy({title: 'id'});</pre>
<div class='code'><pre>$('#example-custom-attribute').tipsy({title: 'id'});</pre></div>

<p>If any attribute isn't good enough, you may pass a callback function instead. It should
return the tooltip text for <code>this</code> element:</p>
Expand All @@ -132,7 +132,7 @@ an anchor tag's title attribute.</p>
</p>

<div class='caption'>Callback example:</div>
<pre class='code'>$('#example-callback').tipsy({title: function() { return this.getAttribute('original-title').toUpperCase(); } });</pre>
<div class='code'><pre>$('#example-callback').tipsy({title: function() { return this.getAttribute('original-title').toUpperCase(); } });</pre></div>

<p>Finally, it is possible to specify a fallback tooltip for any element which does not
have any tooltip text:</p>
Expand All @@ -142,7 +142,7 @@ an anchor tag's title attribute.</p>
</p>

<div class='caption'>Fallback example:</div>
<pre class='code'>$('#example-fallback').tipsy({fallback: "Where's my tooltip yo'?" });</pre>
<div class='code'><pre>$('#example-fallback').tipsy({fallback: "Where's my tooltip yo'?" });</pre></div>

<p>If your tooltip content contains HTML, set the
<code>html</code> option to <code>true</code> (relies on invalid HTML, sorry):</p>
Expand All @@ -152,14 +152,14 @@ an anchor tag's title attribute.</p>
</p>

<div class='caption'>HTML example:</div>
<pre class='code'>$('#example-html').tipsy({html: true });</pre>
<div class='code'><pre>$('#example-html').tipsy({html: true });</pre></div>

<!-- Delay -->

<h3>Show/Hide Delay</h3>

<div class="caption">Delay example:</div>
<pre class='code'>$('#example-delay').tipsy({delayIn: 500, delayOut: 1000});</pre>
<div class='code'><pre>$('#example-delay').tipsy({delayIn: 500, delayOut: 1000});</pre></div>

<p>
<a id='delay-example' title='display is delayed by 0.5s, hiding by 1s' href='#'>Hover and wait</a>
Expand Down Expand Up @@ -217,11 +217,11 @@ an anchor tag's title attribute.</p>
</script>

<div class='caption'>Form input tooltips code:</div>
<pre class='code'>&lt;script type=&#x27;text/javascript&#x27;&gt;
<div class='code'><pre>&lt;script type=&#x27;text/javascript&#x27;&gt;
$(function() {
$(&#x27;#focus-example [title]&#x27;).tipsy({trigger: &#x27;focus&#x27;, gravity: &#x27;w&#x27;});
});
&lt;/script&gt;</pre>
&lt;/script&gt;</pre></div>

<!-- Manual Triggering -->

Expand All @@ -241,15 +241,15 @@ an anchor tag's title attribute.</p>
</script>

<div class='caption'>Code for manual triggering:</div>
<pre class='code'>&lt;p id=&#x27;manual-example&#x27;&gt;
&lt;a rel=&#x27;tipsy&#x27; title=&#x27;Well hello there&#x27;&gt;My tooltip is manually triggered&lt;/a&gt;
&lt;a href=&#x27;#&#x27; onclick=&#x27;$(&quot;#manual-example a[rel=tipsy]&quot;).tipsy(&quot;show&quot;); return false;&#x27;&gt;Show&lt;/a&gt;
&lt;a href=&#x27;#&#x27; onclick=&#x27;$(&quot;#manual-example a[rel=tipsy]&quot;).tipsy(&quot;hide&quot;); return false;&#x27;&gt;Hide&lt;/a&gt;
&lt;/p&gt;

&lt;script type=&#x27;text/javascript&#x27;&gt;
$(&#x27;#manual-example a[rel=tipsy]&#x27;).tipsy({trigger: &#x27;manual&#x27;});
&lt;/script&gt;</pre>
<div class='code'><pre>&lt;p id=&#x27;manual-example&#x27;&gt;
&lt;a rel=&#x27;tipsy&#x27; title=&#x27;Well hello there&#x27;&gt;My tooltip is manually triggered&lt;/a&gt;
&lt;a href=&#x27;#&#x27; onclick=&#x27;$(&quot;#manual-example a[rel=tipsy]&quot;).tipsy(&quot;show&quot;); return false;&#x27;&gt;Show&lt;/a&gt;
&lt;a href=&#x27;#&#x27; onclick=&#x27;$(&quot;#manual-example a[rel=tipsy]&quot;).tipsy(&quot;hide&quot;); return false;&#x27;&gt;Hide&lt;/a&gt;
&lt;/p&gt;

&lt;script type=&#x27;text/javascript&#x27;&gt;
$(&#x27;#manual-example a[rel=tipsy]&#x27;).tipsy({trigger: &#x27;manual&#x27;});
&lt;/script&gt;</pre></div>

<!-- Live Events Support -->

Expand All @@ -271,15 +271,15 @@ an anchor tag's title attribute.</p>
</script>

<div class='caption'>Code for live events:</div>
<pre class='code'>&lt;script type=&#x27;text/javascript&#x27;&gt;
<div class='code'><pre>&lt;script type=&#x27;text/javascript&#x27;&gt;
$(&#x27;a.live-tipsy&#x27;).tipsy({live: true});
&lt;/script&gt;</pre>
&lt;/script&gt;</pre></div>

<!-- Options -->

<h2 id="options">Summary of Configuration Options</h2>
<p>Here is the default options declaration:
<pre>$.fn.tipsy.defaults = {
<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?
Expand All @@ -291,7 +291,7 @@ an anchor tag's title attribute.</p>
opacity: 0.8, // opacity of tooltip
title: 'title', // attribute/callback containing tooltip text
trigger: 'hover' // how tooltip is triggered - hover | focus | manual
};</pre>
};</pre></div>

<!-- Notes -->

Expand All @@ -315,4 +315,4 @@ an anchor tag's title attribute.</p>
</p>

<h3>github</h3>
<pre class='shell'><span class='green'>jason@donut</span> <span class='blue'>~ $</span> git clone git://github.com/jaz303/tipsy.git</pre>
<div class='code shell'><pre><span class='green'>jason@donut</span> <span class='blue'>~ $</span> git clone git://github.com/jaz303/tipsy.git</pre></div>
2 changes: 1 addition & 1 deletion docs/src/tipsy-docs.css
View file
@@ -1,5 +1,5 @@
#gravity { width: 100%; margin: 5px 0; border-spacing: 5px; }
#gravity td { text-align: center; vertical-align: middle; padding: 5px 0; background-color: #d0d0d0; }
#gravity td { text-align: center; vertical-align: middle; padding: 5px 0; background-color: #d0d0d0; width: 33%; }
#gravity a { }
#gravity a:hover { color: #505050; background: none; }

0 comments on commit 69ef830

Please sign in to comment.