This is a port of Twitters twipsy for Bootstrag to mootools. It includes all features of the original, including a Twipsy object for custom integration and all styles are injected via the script, so no additional stylesheet is required.
Include the Twipsy.js and call .twipsy for an Element of an Elements collection of your choice.
javascript window.addEvent("domready", function() { $$("a.twipsy").twipsy(); });
Options can be passed along by (they are read in the following order) 1. Changing the values in Twipsy.defaults 2. Passing an object to the .twipsy method or the new Twipsy() constructor 3. Adding data- properties to the elements you want to twipsify
Example javascript Twipsy.default.offset = 10 window.addEvent("domready", function() { $$("a.twipsy").twipsy({ "placement": "left" }); });
html <a href="#" class="twipsy" title="Show me on the left, with delay" data-delay-in="200" data-delay-out="200">Show</a>
As you can see, the data attributes use hyphens in case the option value is camelCased.
| Name | Type | Default | Description |
|---|---|---|---|
| animate | boolean | true | apply a css fade transition to the tooltip |
| delayIn | number | 0 | delay before showing tooltip (ms) |
| delayOut | number | 0 | delay before hiding tooltip (ms) |
| fallback | string | '' | text to use when no tooltip title is present |
| placement | string | 'above' | how to position the tooltip - above | below | left | right |
| html | boolean | false | allows html content within tooltip |
| offset | number | 0 | pixel offset of tooltip from target element |
| title | string, function | 'title' | attribute or method for retrieving title text |
| trigger | string | 'hover' | how tooltip is triggered - hover | focus | manual |
| template | string | [default markup] | The html template used for rendering a twipsy. |
| injectStyles | boolean | true | Inject the default styles. Useful if you need a ready and go solution for twipsies. In case you want to use your own styles, set this to false. eg:
Twipsy.defaults.injectStyles = false;
window.addEvent("domready", function() {
$$("a.twipsy").twipsy();
});
|
A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.
Found a bug in this plugin? Please report it this repository's Github Issues.
blog comments powered by Disqus