diff --git a/docs/src/index.html.erb b/docs/src/index.html.erb index 1ca16cf..3abbff4 100644 --- a/docs/src/index.html.erb +++ b/docs/src/index.html.erb @@ -33,7 +33,7 @@ an anchor tag's title attribute.

Basic example:
-
$('#example-1').tipsy();
+
$('#example-1').tipsy();

Gravities

@@ -87,7 +87,7 @@ an anchor tag's title attribute.

Gravity example:
-
$('#foo').tipsy({gravity: 'n'}); // nw | n | ne | w | e | sw | s | se
+
$('#foo').tipsy({gravity: 'n'}); // nw | n | ne | w | e | sw | s | se

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, this refers to the active element, and the function should return the calculated gravity as a string. Two demo callbacks are supplied - $.fn.tipsy.autoNS and $.fn.tipsy.autoWE - which select north/south and west/east gravity, respectively, based on the element's location in the viewport.

@@ -96,7 +96,7 @@ an anchor tag's title attribute.

Dynamic Gravity
Dynamic gravity example:
-
$('#foo').tipsy({gravity: $.fn.tipsy.autoNS});
+
$('#foo').tipsy({gravity: $.fn.tipsy.autoNS});

Fading

@@ -107,7 +107,7 @@ an anchor tag's title attribute.

Fade example:
-
$('#example-fade').tipsy({fade: true});
+
$('#example-fade').tipsy({fade: true});

Bonus Feature

@@ -122,7 +122,7 @@ an anchor tag's title attribute.

Custom attribute example:
-
$('#example-custom-attribute').tipsy({title: 'id'});
+
$('#example-custom-attribute').tipsy({title: 'id'});

If any attribute isn't good enough, you may pass a callback function instead. It should return the tooltip text for this element:

@@ -132,7 +132,7 @@ an anchor tag's title attribute.

Callback example:
-
$('#example-callback').tipsy({title: function() { return this.getAttribute('original-title').toUpperCase(); } });
+
$('#example-callback').tipsy({title: function() { return this.getAttribute('original-title').toUpperCase(); } });

Finally, it is possible to specify a fallback tooltip for any element which does not have any tooltip text:

@@ -142,7 +142,7 @@ an anchor tag's title attribute.

Fallback example:
-
$('#example-fallback').tipsy({fallback: "Where's my tooltip yo'?" });
+
$('#example-fallback').tipsy({fallback: "Where's my tooltip yo'?" });

If your tooltip content contains HTML, set the html option to true (relies on invalid HTML, sorry):

@@ -152,14 +152,14 @@ an anchor tag's title attribute.

HTML example:
-
$('#example-html').tipsy({html: true });
+
$('#example-html').tipsy({html: true });

Show/Hide Delay

Delay example:
- 
$('#example-delay').tipsy({delayIn: 500, delayOut: 1000});
+ 
$('#example-delay').tipsy({delayIn: 500, delayOut: 1000});

Hover and wait @@ -217,11 +217,11 @@ an anchor tag's title attribute.

Form input tooltips code:
- 
<script type='text/javascript'>
+  
<script type='text/javascript'>
   $(function() {
     $('#focus-example [title]').tipsy({trigger: 'focus', gravity: 'w'});
   });
-</script>

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

Code for manual triggering:
- 
<p id='manual-example'>
-    <a rel='tipsy' title='Well hello there'>My tooltip is manually triggered</a>
-    <a href='#' onclick='$("#manual-example a[rel=tipsy]").tipsy("show"); return false;'>Show</a>
-    <a href='#' onclick='$("#manual-example a[rel=tipsy]").tipsy("hide"); return false;'>Hide</a>
-  </p>
-
-  <script type='text/javascript'>
-    $('#manual-example a[rel=tipsy]').tipsy({trigger: 'manual'});
-  </script>
+ 
<p id='manual-example'>
+  <a rel='tipsy' title='Well hello there'>My tooltip is manually triggered</a>
+  <a href='#' onclick='$("#manual-example a[rel=tipsy]").tipsy("show"); return false;'>Show</a>
+  <a href='#' onclick='$("#manual-example a[rel=tipsy]").tipsy("hide"); return false;'>Hide</a>
+</p>
+
+<script type='text/javascript'>
+  $('#manual-example a[rel=tipsy]').tipsy({trigger: 'manual'});
+</script>
@@ -271,15 +271,15 @@ an anchor tag's title attribute.

Code for live events:
- 
<script type='text/javascript'>
+  
<script type='text/javascript'>
   $('a.live-tipsy').tipsy({live: true});
-</script>

+</script>

Summary of Configuration Options

Here is the default options declaration: - 

$.fn.tipsy.defaults = {
+  
$.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.

     opacity: 0.8,    // opacity of tooltip
     title: 'title',  // attribute/callback containing tooltip text
     trigger: 'hover' // how tooltip is triggered - hover | focus | manual
-};

+};
@@ -315,4 +315,4 @@ an anchor tag's title attribute.

github

- 
jason@donut ~ $ git clone git://github.com/jaz303/tipsy.git
+ 
jason@donut ~ $ git clone git://github.com/jaz303/tipsy.git
diff --git a/docs/src/tipsy-docs.css b/docs/src/tipsy-docs.css index 011a9cc..4fc383c 100644 --- a/docs/src/tipsy-docs.css +++ b/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; }