diff --git a/docs/src/index.html.erb b/docs/src/index.html.erb index 94c25a5..f86f75d 100644 --- 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 }); + });

Overview

-

Tipsy is a jQuery for creating a Facebook-like tooltips effect based on +

Tipsy is a jQuery plugin for creating a Facebook-like tooltips effect based on an anchor tag's title attribute.

Examples & Usage

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

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

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. One demo callback is supplied - $.fn.tipsy.autoNS, requires jQuery 1.3.2 - which selects north or south gravity based on the element's location in the viewport.

+

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.

Here's an example (scroll the page to see the effect):

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

Callback example:
-
$('#example-callback').tipsy({title: function() { return this.getAttribute('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:

@@ -119,6 +121,17 @@ an anchor tag's title attribute.

Fallback example:
$('#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):

+ +

+ Hover over me +

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

Notes

Tipsy needs to erase any existing value for an element's title attribute in