Outlookの着信通知みたいなツールチップをjQueryで出したい

ツールチップ？

ツールチップと言う表現が正しいかというと、たぶんあまり正しくはないです。
バルーンポップアップ？バルーンチップ？
後者はWindowsのタスクトレイに出てくる吹き出しみたいな奴ですが、イメージしているのはOutlookでメールを受信したときに右下に出てくるアレ。
Outlookは使ってないので正式名称はわかりませんが、私が愛用しているShurikenだと「ポップアップ」扱いです。
なので、以降は『右下ポップアップ』と呼称します。

とりあえず作ってみた

jQuery1.31を使ってます。1.26でも動くはず。
複数個右下に送信したときの表示が課題。ぬるぬる動かすともうちょい見た目は良くなるかも。
整列させずに、隙間に新しいポップアップを入れていくのは諦めました。座標と要素の絡みがね・・


右下ポップアップの関連ファイルをまとめてDownLoad。
ちなみにタイマーはこちらのタイマープラグインを使わせていただきました。
死ぬほど便利。というかコールバックの固まりすぎて何が何だかよくわからない。

コードとか

必要なjsファイルを読み込み、

    <script type="text/javascript" language="javascript" src="script/jquery.js" />
    <script type="text/javascript" language="javascript" src="script/jquery.timer.js" />
    <script type="text/javascript" language="javascript" src="script/jquery.lrTooltip.js" />

スタイルを定義。

<style type="text/css">
div.lr_area {
    position:fixed;
    background-image:url(./script/pp_back.png);
    }
div.lr_inner_area{
    clear:left;
    padding-left:2px;
    }
</style>

jquery.lrTooltip.jsの中身。

/// <reference path="jquery.js" />
(function($) {
    $.sendLr = function(message, options) {
        // as you like fix
        // It doesn't disappear automatically when you set null to dispTime. 
        this.defaults = {
            width: 200,
            height: 100,
            className: "lr_area",
            innerClassName: "lr_inner_area",
            dispTime: 10000
        };
        var config = $.extend({}, this.defaults, options);

        // position stack array
        var pos = new Array();
        $("." + config.className).each(function(i) {
            pos.push(Array($(this).position().top + $(this).height(), $(this).position().top, $(this)));
        });
        pos.sort(function(a, b) {
            if (a[0] < b[0]) { return 1; }
            else { return -1; }
        });

        // new tooltip object
        var newPopup = $("<div></div>").hide()
        .addClass(config.className)
        .css("width", config.width)
        .css("height", config.height);
        $(document.body).append(newPopup);

        // for close button
        // if you change tooltip image fix this
        var popupTopLeft = $("<div></div>")
        .css("position", "relative")
        .css("width", config.width - 15)
        .css("height", 15)
        .css("float", "left");

        var popupTopRight = $("<div></div>")
        .css("position", "relative")
        .css("width", 15)
        .css("height", 13)
        .css("cursor", "pointer")
        .css("float", "left");

        // for tooltip inner area
        var popupInner = $("<div></div>")
        .addClass(config.innerClassName)
        .append(message);

        // create tooltip
        newPopup.append(popupTopLeft);
        newPopup.append(popupTopRight);
        newPopup.append(popupInner);
        newPopup.css("top", $(window).height() - $(newPopup).height());
        newPopup.css("left", $(window).width() - $(newPopup).width());

        // replace old tooltip height only
        if (pos.length > 0) {
            var new_y = $(window).height() - $(newPopup).height();
            for (i = 0; i < pos.length; i++) {
                new_y -= pos[i][2].height();
                pos[i][2].hide();
                pos[i][2].css("top", new_y);
                pos[i][2].show();
            }
        }

        // fadein new tooltip
        // as you like fix
        newPopup.fadeIn("slow");

        // set event to close button
        popupTopRight.bind("click", function(event) {
            newPopup.remove();
            event.preventDefault();
            event.stopPropagation();
        });

        // set timer to tooltip
        if (config.dispTime) {
            $.timer(config.dispTime, function(timer) {
                newPopup.fadeOut("slow", function() { newPopup.remove(); }); // as you like fix
                timer.stop();
            });
        }
    }
})(jQuery);

使い方。

  $.sendLr("message box show .... ", { width: 250, height: 80, dispTime: 6000 });

license?

ブラウザ上でHTMLに動的リンクされるJavascriptのライセンスは、例えばGPLならどう感染するのか曖昧すぎるので、特にライセンスは定めません。
jquery.lrTooltip.jsについては如何なる目的にもご自由に改変、利用して構いません。
そんな大したもんでもないし。
バグとか実装上の問題とか多々ありそうなので、何かありましたらBlogの方までどうぞ。