MooTools.Tips v1.2

Back in the days of MooTools v1.1, MooTips was an external class designed to use an element’s “title” attribute to control the content of the tip. See a demo of the 1.1 version.

MooTools v1.2 includes a “Tips” class which operates very differently from the v1.1 extension. Browse the online documentation.

Breaking it down…

Download the MooTools core library and use the more builder to download the additional “Tips” functionality. Include the files in the head of your page:

<script type="text/javascript" src="mootools-1.2.1-core-yc.js"></script>
<script type="text/javascript" src="mootools-1.2-more.js"></script>

Add the tooltip css:

<style type="text/css">
/* MooTools.Tips */
.tip-top {
    color: #fff;
    width: 139px;
    z-index: 13000;
}
.tip-title {
    width: 123px;
    font-weight: bold;
    font-size: 11px;
    margin: 0;
    color: #9FD4FF;
    padding: 8px 8px 4px;
    background: url(bubble.png) top left;
}
.tip-text {
    width: 123px;
    font-size: 11px;
    padding: 4px 8px 8px;
    background: url(bubble.png) bottom right;
    color:#fff;
}
.tip-text A {
    color:#069;
}
.tip-loading {
    background: url(ajax_load.gif) center center no-repeat;
    width: 30px;
    height: 30px;
    margin: 0 auto;
}
</style>

Add an element to tooltip:

<body>
  <img src="moo.png" id="simple_tip" />
</body>

Using javascript, set the Title and Text to be displayed in the tip:

$('simple_tip').store('tip:title', "This is the Title");
$('simple_tip').store('tip:text', "This is the Text");

And finally, create the tip:

var SimpleTip = new Tips($('simple_tip'), {
  showDelay: 0,
  hideDelay: 0,
  offsets: {x: 10, y: 10},
  fixed: false
});

Check the full source code and a working v1.2 simple Tips demo.

8 Comments

  1. There are just a couple changes you’d have to make, depending on the complexity of your 1.1 MooTips implementation.

    Do you have a specific example or sourcecode in mind?

  2. Wow, just wanted to say thanks for putting you free time into this. This definitely makes things a lot more clearer. It’s almost exactly what I want I’m only missing the old ajax functionality with: title=”AJAX:lipsum.htm” class=”toolTipImgAJAX”

    But I’m going to try and figure that out myself. You’ve already done the hardest part :) thanks again.

  3. @cssprodigy – sorry…it’s only been a month since your comment :p

    i updated the demo to handle an “AJAX::Url.html” (note the double colons instead of single). http://www.uhleeka.com/archives/mootools/1.2.1/tips-convert-v11/

    it works as a really simple tip, but the built-in functionality of the Tips object is very limited compared to the 1.1 library. For example, you cannot put a link in your tip because you cannot mouseover the tip (it hides on mouseout of your element). Another example, when you set the “fixed” option to true, the tip is fixed to the top left corner of the calling element.

    So, if you are looking for anything more advanced than what I have posted, you will probably want to find some sort of external library to do what you need.

    Thanks!

Comments are closed.