facebOOkTips v2.2: a facebook style tooltip for mootools


by D. Christoff - fragged.org - updated 16/06/2009
You need: mootools 1.2+

As usual, the script goes into the domready portion of the page.

Mouseover this or this for a demo.
On an input field:

Usage for this page:

window.addEvent("domready", function() {
    $$(".tipster").addEvents({
        mouseenter: function() {
            this.store("msg", this.get("title")); // get title
            // remove default title behaviour once moved into tooltip
            if (this.retrieve("msg")) this.set("title", "");

            //if no title, use a random one...
            this.tooltip(this.retrieve("msg") || ["Nice tips", "Wow, this works", "Amazing... not."].getRandom());
        }
    });

});

The script itself (needs mootools) :

// extend element prototype
Element.implement({
    tooltip: function(message, options) {
        // a quick 'facebook' style tooltip
        // function version 2.2, 21/06/2009 20:04:16

        if (!$type(message))
            return false;

        if ($type(this.tipbody)== "element")
            this.tipbody.dispose();

        var options = $merge({
            eventStart: "mouseenter",
            eventEnd: "mouseleave",
            topOffset: 20,
            opacity: 1
        }, options);

        var coords = this.getCoordinates();

        this.tipbody = new Element("div", {
            styles: {
                background: "transparent url(/images/point_down.gif) no-repeat center bottom",
                float: "left",
                position: "absolute",
                left: 0,
                top: -100,
                opacity: options.opacity,
                height: 20
            }
        }).adopt(new Element("div", {
            styles: {
                background: "#4c4c4c",
                color: "#ffffe5",
                padding: 0,
                "padding-top": 2,
                "line-height": 10,
                margin: 0,
                "padding-left": 9,
                "padding-right": 9,
                display: "block",
                "margin-left": "auto",
                "margin-right": "auto",
                overflow: "hidden",
                "font-size": "10px",
                "font-family": "verdana",
                float: "left",
                height: 13
            },
            html: message.replace(/ /g, " ")
        })).inject(document.body);

        this.addEvent(options.eventEnd, function() {
            if ($type(this.tipbody) == "element") {
                this.tipbody.dispose();
                this.tipbody = null;
                this.removeEvent(options.eventEnd);
            }
        }.bind(this));

        // var tipWidth = tipbody.getCoordinates();
        var t = this.tipbody.getSize();

        this.tipbody.setStyles({
            left: coords.left + (coords.width / 2).round() - (t.x / 2).round(),
            top: coords.top - options.topOffset,
            width: t.x
        });

        return this;
    }
});