UH.LEE.KA » Scripting

bubbletip! A jQuery Coda-style bubble tooltip plugin

uhleeka — Thu, 12 Nov 2009 02:26:46 +0000

Features

multiple tips on a page
multiple tips per jQuery element
tips open outward in four directions:
- up
- down
- left
- right
tips can be:
- anchored to the triggering jQuery element
- absolutely positioned
- opened at the current mouse coordinates
- anchored to a specified jQuery element
IE png transparency is handled via filters

Tested (lightly)

IE 6 on XP
IE 7 and 8 on Vista
Firefox 3.5 on Vista
Chrome 3.0 on Vista
Safari 3.2 on Vista

Examples

MOUSEOVER to open a tooltip above, below, to the left or to the right of any element.

MOUSEOVER a trigger element to open a tooltip above and below a target element.

Using it?

If you enjoy using it, I’d love to hear about it. Drop a comment with a link!

Credit

bubbletip was inspired by http://jqueryfordesigners.com/coda-popup-bubbles/.

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.