MooTools.Tips Port v1.1 to v1.2

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:

<div class="options.className">
  <div class="tip-top"></div>
  <div class="tip">
    <div class="tip-title"></div>
    <div class="tip-text"></div>
  </div>
  <div class="tip-bottom"></div>
</div>

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

<span id="myTip" title="This is the title::This is the text">
  Hover over me to see a tooltip
</span>
<span id="myTipAjax" title="AJAX::myurl.html">
  Hover over me to see a tooltip retrieved via MooTools.Request
</span>

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/

One Comment

  1. I get the following error when I use the following code
    Error: c.getParent is not a function

    <li class="list-li" id="myTipAjax" title="AJAX::galleryTips.jsp">
    <a class="list-a" href="rock_climbing_gallery_Kanaga.jsp" >
    <font class="list-font">
    Kanaga
    </font>
    </a>
    </li>

    galleryTips.jsp

    <div class="options.className">
    <div class="tip-top">Hitesh</div>
    <div class="tip">
    <div class="tip-title">Good</div>
    <div class="tip-text">Text</div>
    </div>
    <div class="tip-bottom">find</div>
    </div>

Comments are closed.