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

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

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

まず既存のonloadアクションとバッティングする可能性があるので
１行目に以下のコードを追加
(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万円稼ぐ方法 | メイン | ホームページの成約率倍増!! 売上・利益アップテクニック»

このエントリーのトラックバックURL
https://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/1434
トラックバック内容
» Bubble Tooltipsをちょっと改造 from Hybrid Style Design. BLOG
このBLOGではコメントとトラックバックのアイコンの箇所で利用しています。 これ...
トラックバック時刻: 2007年4月28日 21:09
コメント

なんか便利そうなんですけどソースはここには載ってないのでしょうか？
是非改造後のソースがほしいです。

投稿者:まり | 2008年7月14日 17:52

＞まりさん
改造後のソースはないですね。

がんばってみてください。

投稿者:西畑一馬 | 2008年7月28日 20:39

はじめましてO2と申します。

BubbleTooltips.jsは以前より使っていましたが、私にはJavaScriptの知識が全くないので手を加えるのが怖く、CSSで少しカスタマイズする程度で使っておりました。

カスタマイズと言っても、URLを消したくてbackground画像と同じ文字色を指定したり（笑）
title属性の無いものまで表示される件は、js適用範囲を限定するなどして何とか乗り切ってたつもりだったのですが（笑）

今回紹介されている方法で、僕が悩んでた全ての点が解消されました。
本当に感謝いたします。ありがとうございました。

JavaScript、少し勉強してみようという気になりました。

投稿者:匿名 | 2008年8月 2日 09:08
コメントを投稿