吹き出し方式のツールチップテキスト作成JavaScriptライブラリ

wg:Bubble Tooltipsで紹介されている吹き出し方式のツールチップテキスト作成JavaScriptライブラリBubbleTooltips.jsですけど結構面白いです。

ただこのままだと実運用に微妙なのでちょっと改造。

まず既存のonloadアクションとバッティングする可能性があるので
1行目に以下のコードを追加
(function(){enableTooltips("id名")})();

これで
<script type="text/javascript" src="BubbleTooltips.js"></script>
をボディー要素を閉じる直前に配置することで実行されます。

指定したidがないとエラーになるのでfunctionの前後に
function enableTooltips(id){
if(document.getElementById(id)){
..............................
}
}

というif文を設置することによりエラー回避します。

とくにリンク先urlなんていらないので
30行目~33行目をコメントアウト
/*l=el.getAttribute("href");
if(l.length>30) l=l.substr(0,27)+"...";
b.appendChild(document.createTextNode(l));*/

後、タイトル属性のないものはツールチップを表示しないようにPrepare()を変更
function Prepare(el){
var tooltip,t,b,s,l;
t=el.getAttribute("title");
if(t!=null && t.length!=0){
......................................
}
}

これで結構汎用性のあるツールチップライブラリになったきがします。

スポンサードリンク

«快適・WEBクリエイター生活 フリーで年収1,000万円稼ぐ方法 | メイン | ホームページの成約率倍増!! 売上・利益アップテクニック»