Twipsy 0.1.2

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.


Current version
GitHub Issues



  • core:1.4.2/String/core: 1.4.2
  • core:1.4.2/Element/core: 1.4.2
  • core:1.4.2/Element.Dimensions/core: 1.4.2

How to use

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() {


  • Jason Frame for the original Twipsy script
  • Twitter Inc. for the improved 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