Bubble Tooltipsをちょっと改造

このBLOGではコメントとトラックバックのアイコンの箇所で利用しています。
これの仕様はidを指定しない限りtitle属性のある箇所でツールチップが表示されるようで、そのままでは問題があるのでちょっと改造しました。
今回はそれをかる~く紹介。
まずはto-R様のエントリーがかなり参考になります。
改造の仕様としてはclassに”BubbleTooltips”と指定されている箇所のみ表示されるように改造しました。
[code]
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 var cls = links[i].getAttribute('class') || links[i].getAttribute('className');
if(cls != null) {
if(cls.match("BubbleTooltips")) {
Prepare(links[i]);
}
}
}
}
[/code]
上記以外に、表示される位置の修正はスクリプトの下部。
デザインはCSSなので、難しくはないと思います。
本当はjQueryを利用して判定させたかったんですが、改造を始める時点で上記の方法が浮かんでいたため10分ほどでやめました。
気が向けばそのうち。

トラックバック

http://blog.eternitydesign.net/archives/2007/04/bubble_tooltips.html/trackback