MooTools.Tips Port v1.1 to v1.2

uhleeka — Sat, 22 Nov 2008 01:23:13 +0000

Converting an old v1.1 implementation of basic MooTips to v1.2 requires just a couple of steps. However, keep in mind that the 1.2 Tips object is strictly meant as a tool tip. You cannot hover over the tip, so there is no built-in way to add interactivity with your tip.

First, the CSS needs to be changed because the underlying element structure of the tip has changed (see a prior post on MooTools.Tips in v1.2 for example css).

The new html structure looks like the following:

Next, you need to import your Title::Text from the “title” attribute of your tip anchor.


  Hover over me to see a tooltip


  Hover over me to see a tooltip retrieved via MooTools.Request

The following function parses out the “Title::Text” from the tip anchor and uses element storage to assign it to the tip. It can also handle an “AJAX::url” format (Note the double colon).

function SetTipStorage(element) {
    // create an array including the title at
    // position 0 and the text at position 1
    var content = element.get('title').split('::');   

    switch(content[0]) {
        case 'AJAX':
            var req = new Request({
                url: content[1],
                method: 'get',
                onFailure: function(xhr) {
                    element.store('tip:title', 'ERROR');
                    element.store('tip:text', 'Ajax request failed');
                },
                onSuccess: function(responseText, responseXML) {
                    content = responseText.split('::');
                    // use the element storage functionality 
                    // to store the title and text for the 
                    // specified element
                    element.store('tip:title', content[0]);   
                    element.store('tip:text', content[1]);
                    // remove the element title
                    element.title = '';
                }
            });
            req.send();
            break;
        default:
            // use the element storage functionality 
            // to store the title and text for the 
            // specified element
            element.store('tip:title', content[0]);   
            element.store('tip:text', content[1]);
            // remove the element title
            element.title = '';
            break;
    }
}

Finally, the last thing to do is to wire up the Tips at “domready”:

window.addEvent('domready', function() {
    var tips = new Tips();
     
    SetTipStorage($('myTip'));
    tips.attach($('myTip'), {
        fixed: false,
        showDelay: 0,
        hideDelay: 0
    });
    SetTipStorage($('myTipAjax'));
    tips.attach($('myTipAjax'), {
        fixed: true,
        showDelay: 0,
        hideDelay: 0
    });
});

See the full code and demo at http://www.uhleeka.com/archives/mootools/1.2.1/tips-convert-v11/

MooTools.Tips v1.2

uhleeka — Tue, 18 Nov 2008 03:09:50 +0000

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:

Add the tooltip css:

Add an element to tooltip:

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.

UH.LEE.KA » MooTips

MooTools.Tips Port v1.1 to v1.2

MooTools.Tips v1.2

Breaking it down…