Twipsy

This is a port of Twitters twipsy for Bootstrap 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.

How to use

Include the Twipsy.js and call .twipsy for an Element of an Elements collection of your choice.

window.addEvent("domready", function() {
    $$("a.twipsy").twipsy();
});

Options can be passed along by (they are read in the following order)

• Changing the values in Twipsy.defaults
• Passing an object to the .twipsy method or the new Twipsy() constructor
• Adding data- properties to the elements you want to twipsify

Example

Twipsy.default.offset = 10
window.addEvent("domready", function() {
    $$("a.twipsy").twipsy({
        "placement": "left"
    });
});

<a
    class="twipsy"
    title="Show me on the left, with delay"
    data-delay-in="200"
    data-delay-out="200"
    href="#">Show</a>

As you can see, the data attributes use hyphens in case the option value is camelCased.

Options

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(); });

Styles

If you implement your own styles by setting injectStyles to false, keep all definitions that are required for Twipsy to function properly. You also have to keep the selectors. Those are the default styles. Just copy and adjust to your needs:

.twipsy {
    display: block;
    position: absolute;
    visibility: visible;
    padding: 5px;
    font-size: 11px;
    z-index: 1000;
    filter: alpha(opacity = 80);
    -khtml-opacity: 0.8;
    -moz-opacity: 0.8;
    opacity: 0.8;
}
.twipsy-fade {
    -webkit-transition: opacity 0.15s linear;
    -moz-transition: opacity 0.15s linear;
    -ms-transition: opacity 0.15s linear;
    -o-transition: opacity 0.15s linear;
    transition: opacity 0.15s linear;
    opacity: 0;
}
.twipsy.twipsy-fade.twipsy-in {
    filter: alpha(opacity = 80);
    -khtml-opacity: 0.8;
    -moz-opacity: 0.8;
    opacity: 0.8;
}
.twipsy.above .twipsy-arrow {
    bottom: 0;
    left: 50%;
    margin-left: -5px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #000000;
}
.twipsy.left .twipsy-arrow {
    top: 50%;
    right: 0;
    margin-top: -5px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #000000;
}
.twipsy.below .twipsy-arrow {
    top: 0;
    left: 50%;
    margin-left: -5px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #000000;
}
.twipsy.right .twipsy-arrow {
    top: 50%;
    left: 0;
    margin-top: -5px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 5px solid #000000;
}
.twipsy-inner {
    padding: 3px 8px;
    background-color: #000000;
    color: white;
    text-align: center;
    max-width: 200px;
    text-decoration: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.twipsy-arrow {
    position: absolute;
    width: 0;
    height: 0;
}

Credits

• Jason Frame for the original Twipsy script
• Twitter Inc. for the improved Twipsy

License

Apache License 2.0