Bubble Tooltipsをちょっと改造

このBLOGではコメントとトラックバックのアイコンの箇所で利用しています。
これの仕様はidを指定しない限りtitle属性のある箇所でツールチップが表示されるようで、そのままでは問題があるのでちょっと改造しました。
今回はそれをかる~く紹介。

まずはto-R様のエントリーがかなり参考になります。

改造の仕様としてはclassに"BubbleTooltips"と指定されている箇所のみ表示されるように改造しました。

function enableTooltips(id){
    var links,i,h;
    if(!document.getElementById || !document.getElementsByTagName) return;

    AddCss();
    h=document.createElement("span");
    h.id="btc";
    h.setAttribute("id","btc");
    h.style.position="absolute";
    document.getElementsByTagName("body")[0].appendChild(h);
    if(id==null) links=document.getElementsByTagName("a");
    else links=document.getElementById(id).getElementsByTagName("a");
    for(i=0;i<links.length;i++){
        var cls = links[i].getAttribute('class') || links[i].getAttribute('className');
        if(cls != null) {
            if(cls.match("BubbleTooltips")) {
                Prepare(links[i]);
            }
        }
    }
}

上記以外に、表示される位置の修正はスクリプトの下部。
デザインはCSSなので、難しくはないと思います。

本当はjQueryを利用して判定させたかったんですが、改造を始める時点で上記の方法が浮かんでいたため10分ほどでやめました。
気が向けばそのうち。

トラックバック(0)

このブログ記事に対するトラックバックURL: http://eternitydesign.net/mt/mt-tb.cgi/135

コメントフォーム

AUTHOR

名古屋でひっそりと活動中。
ホームページ制作、Flashコンテンツ制作など制作依頼がありましたらお気軽にご連絡ください。
ご希望の方には制作実績も同時にお伝えいたします。

TAG CLOUD