docs updated

fei0456116 · Dec 31, 2009 · 7861f82 · 7861f82
1 parent a663c5c
commit 7861f82
Showing 1 changed file with 17 additions and 4 deletions.
diff --git a/docs/src/index.html.erb b/docs/src/index.html.erb
@@ -14,15 +14,17 @@
     $('#example-fade').tipsy({fade: true});
 
     $('#example-custom-attribute').tipsy({title: 'id'});
-    $('#example-callback').tipsy({title: function() { return this.getAttribute('title').toUpperCase(); } });
+    $('#example-callback').tipsy({title: function() { return this.getAttribute('original-title').toUpperCase(); } });
     $('#example-fallback').tipsy({fallback: "Where's my tooltip yo'?" });
 
+    $('#example-html').tipsy({html: true });
+
   });
 </script>
 
 <h2 class='first' id='overview'>Overview</h2>
 
-<p>Tipsy is a jQuery for creating a Facebook-like tooltips effect based on
+<p>Tipsy is a jQuery plugin for creating a Facebook-like tooltips effect based on
 an anchor tag's title attribute.</p>
 
 <h2 id='examples'>Examples &amp; Usage</h2>
@@ -64,7 +66,7 @@ an anchor tag's title attribute.</p>
 <div class='caption'>Gravity example:</div>
 <pre class='code'>$('#foo').tipsy({gravity: 'n'}); // n | s | e | w</pre>
 
-<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. One demo callback is supplied - <code>$.fn.tipsy.autoNS</code>, requires jQuery 1.3.2 - which selects north or south gravity based on the element's location in the viewport.</p>
+<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>
 
 <p>Here's an example (scroll the page to see the effect):</p>
 
@@ -107,7 +109,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('title').toUpperCase(); } });</pre>
+<pre class='code'>$('#example-callback').tipsy({title: function() { return this.getAttribute('original-title').toUpperCase(); } });</pre>
 
 <p>Finally, it is possible to specify a fallback tooltip for any element which does not
   have any tooltip text:</p>
@@ -119,6 +121,17 @@ an anchor tag's title attribute.</p>
 <div class='caption'>Fallback example:</div>
 <pre class='code'>$('#example-fallback').tipsy({fallback: "Where's my tooltip yo'?" });</pre>
 
+<p>If your tooltip content contains HTML, set the
+  <code>html</code> option to <code>true</code> (relies on invalid HTML, sorry):</p>
+
+<p>
+	<a id='example-html' title='this <i>contains</i> <b>formatted</b> text' href='#'>Hover over me</a>
+</p>
+
+<div class='caption'>HTML example:</div>
+<pre class='code'>$('#example-html').tipsy({html: true });</pre>
+
+
 <h2 id='notes'>Notes</h2>
 
 <p>Tipsy needs to erase any existing value for an element's <code>title</code> attribute in