吹き出し方式のツールチップテキスト作成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万円稼ぐ方法 | メイン | ホームページの成約率倍増!! 売上・利益アップテクニック»
- このエントリーのトラックバックURL
- https://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/1434
- トラックバック内容
-
» Bubble Tooltipsをちょっと改造
from Hybrid Style Design. BLOG
このBLOGではコメントとトラックバックのアイコンの箇所で利用しています。 これ...
なんか便利そうなんですけどソースはここには載ってないのでしょうか?
是非改造後のソースがほしいです。
>まりさん
改造後のソースはないですね。
がんばってみてください。
はじめましてO2と申します。
BubbleTooltips.jsは以前より使っていましたが、私にはJavaScriptの知識が全くないので手を加えるのが怖く、CSSで少しカスタマイズする程度で使っておりました。
カスタマイズと言っても、URLを消したくてbackground画像と同じ文字色を指定したり(笑)
title属性の無いものまで表示される件は、js適用範囲を限定するなどして何とか乗り切ってたつもりだったのですが(笑)
今回紹介されている方法で、僕が悩んでた全ての点が解消されました。
本当に感謝いたします。ありがとうございました。
JavaScript、少し勉強してみようという気になりました。