Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Mootools port of the jQuery plugin Twipsy
JavaScript
Branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
Demo
Source
README.md
package.yml

README.md

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.

Screenshot

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

Something went wrong with that request. Please try again.