| 1 | |
|---|
| 2 | /* |
|---|
| 3 | * jQuery clueTip Plugin |
|---|
| 4 | * |
|---|
| 5 | * Dual licensed under the MIT and GPL licenses: |
|---|
| 6 | * http://www.opensource.org/licenses/mit-license.php |
|---|
| 7 | * http://www.gnu.org/licenses/gpl.html |
|---|
| 8 | * |
|---|
| 9 | * @name clueTip |
|---|
| 10 | * @type jQuery |
|---|
| 11 | * @cat Plugins/tooltip |
|---|
| 12 | * @return jQuery |
|---|
| 13 | * @author Karl Swedberg |
|---|
| 14 | * |
|---|
| 15 | * @requires jQuery v1.3+ |
|---|
| 16 | * |
|---|
| 17 | * @credit Inspired by Cody Lindley's jTip (http://www.codylindley.com) |
|---|
| 18 | * @credit Thanks to the following people for their many and varied contributions: |
|---|
| 19 | Shelane Enos, Glen Lipka, Hector Santos, Torben Schreiter, Dan G. Switzer, Jörn Zaefferer |
|---|
| 20 | * @credit Thanks to Jonathan Chaffer, as always, for help with the hard parts. :-) |
|---|
| 21 | */ |
|---|
| 22 | |
|---|
| 23 | /** |
|---|
| 24 | * |
|---|
| 25 | * Displays a highly customizable tooltip when the user hovers (default) or clicks (optional) the matched element. |
|---|
| 26 | * By default, the clueTip plugin loads a page indicated by the "rel" attribute via ajax and displays its contents. |
|---|
| 27 | * If a "title" attribute is specified, its value is used as the clueTip's heading. |
|---|
| 28 | * The attribute to be used for both the body and the heading of the clueTip is user-configurable. |
|---|
| 29 | * Optionally, the clueTip's body can display content from an element on the same page. |
|---|
| 30 | * * Just indicate the element's id (e.g. "#some-id") in the rel attribute. |
|---|
| 31 | * Optionally, the clueTip's body can display content from the title attribute, when a delimiter is indicated. |
|---|
| 32 | * * The string before the first instance of the delimiter is set as the clueTip's heading. |
|---|
| 33 | * * All subsequent strings are wrapped in separate DIVs and placed in the clueTip's body. |
|---|
| 34 | * The clueTip plugin allows for many, many more options. Please see the examples and the option descriptions below... |
|---|
| 35 | * |
|---|
| 36 | * |
|---|
| 37 | * @example $('#tip).cluetip(); |
|---|
| 38 | * @desc This is the most basic clueTip. It displays a 275px-wide clueTip on mouseover of the element with an ID of "tip." On mouseout of the element, the clueTip is hidden. |
|---|
| 39 | * |
|---|
| 40 | * |
|---|
| 41 | * @example $('a.clue').cluetip({ |
|---|
| 42 | * hoverClass: 'highlight', |
|---|
| 43 | * sticky: true, |
|---|
| 44 | * closePosition: 'bottom', |
|---|
| 45 | * closeText: '<img src="cross.png" alt="close" />', |
|---|
| 46 | * truncate: 60, |
|---|
| 47 | * ajaxSettings: { |
|---|
| 48 | * type: 'POST' |
|---|
| 49 | * } |
|---|
| 50 | * }); |
|---|
| 51 | * @desc Displays a clueTip on mouseover of all <a> elements with class="clue". The hovered element gets a class of "highlight" added to it (so that it can be styled appropriately. This is esp. useful for non-anchor elements.). The clueTip is "sticky," which means that it will not be hidden until the user either clicks on its "close" text/graphic or displays another clueTip. The "close" text/graphic is set to diplay at the bottom of the clueTip (default is top) and display an image rather than the default "Close" text. Moreover, the body of the clueTip is truncated to the first 60 characters, which are followed by an ellipsis (...). Finally, the clueTip retrieves the content using POST rather than the $.ajax method's default "GET." |
|---|
| 52 | * |
|---|
| 53 | * More examples can be found at http://plugins.learningjquery.com/cluetip/demo/ |
|---|
| 54 | * |
|---|
| 55 | * Full list of options/settings can be found at http://plugins.learningjquery.com/cluetip/ |
|---|
| 56 | */ |
|---|
