Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

docs updated again

  • Loading branch information...
commit 69ef8305c99f2d1b5c55d37d3081c6a3047b6dbf 1 parent c28076e
@jaz303 jaz303 authored
Showing with 26 additions and 26 deletions.
  1. +25 −25 docs/src/index.html.erb
  2. +1 −1  docs/src/tipsy-docs.css
View
50 docs/src/index.html.erb
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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 -->
@@ -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 -->
@@ -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?
@@ -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 -->
@@ -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>
View
2  docs/src/tipsy-docs.css
@@ -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; }
Please sign in to comment.
Something went wrong with that request. Please try again.