忍者ブログ

WEBデザインとかSOHO, MacユーザのWEB制作者の徒然メモ。

[PR]

Posted by - 2017.11.20,Mon
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

コンパチビリティがしっかりしているツールチップライブラリ Bubble Tooltips

Posted by toka - 2007.10.26,Fri
JavaScriptツールチップライブラリ24個:phpspot開発日誌なんかを見てみても、探してみると、かなりたくさん見つかるツールチップライブラリ。

ざっと見た中では、Bubble Tooltipsというライブラリが良さそうだったので、試しに使ってみました。

動作サンプル(マウスを上にあててください。)

ちなみに、選んだ基準は下記のとおり。

1. IE, Safari, Firefoxで動作するライブラリ
2. JavaScriptの知識が無くても何とかカスタムできそうなライブラリ
3. フェードイン/アウト等の機能は、個人的にストレスに感じるので無しで可。
※見た目にはかっこいいのですが、出てくるまでの時間を待つのが嫌なので。。

Bubble Tooltipsのちょっとしたカスタム

上記の「2」に関しては、下記の記事を参考に。

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

上記の記事の中で特に役立ったのは、リンク先URLの削除についてと、タイトル属性の無いものについて、ツールチップを表示させない方法。
JavaScriptの知識がないので、そもそもそんなカスタムが出来るかどうかも思い付きませんでした。。

あと、デフォルトではBubbleTooltips.js(ライブラリ内のJavaScript)からCSSを読み込むようになっているようだったのですが、ブログ等で使用した場合、ディレクトリの関係で上手くCSSを読み込まない場合があったので、BubbleTooltips.jsの下記の部分を書き換えて対処しました。

【デフォルト】
l.setAttribute("href","bt.css");

【書き換え後】
l.setAttribute("href","http://hogehoge.com/xxx/yyy/bt.css");
※CSSへの相対パスを絶対パスに変更

ちなみに、BubbleTooltips.jsの最後の2行の数字部分を変えるとフキダシの位置を変更できるようです。

document.getElementById("btc").style.top=(posy数字)+"px";
document.getElementById("btc").style.left=(posx数字)+"px";

上記以外でカスタムしたところといえば、設置先のサイトデザインに合わせてフキダシ画像とCSS(幅とか)を調整した程度。

動作するブラウザも要件を満たし、使い勝手にも満足。
PR
Comments
Post a Comment
Name :
Title :
E-mail :
URL :
Comments :
お手数をおかけ致しますが、文中のどこかに「す。」という言葉を入れてコメントして頂きますようお願い致します。(例:〜です。)
※外国語圏からのスパム防止のため。
Pass :   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
TrackBack URL
TrackBacks
人気っぽい記事7つ
あわせて読みたい
メールフォーム
Powered by NINJA TOOLS
Twitter
プロフィール
HN:
toka
性別:
非公開
職業:
WEB制作者
自己紹介:
フリーランスのWEBデザイナー。
マーケティングへの取り組みやユーザビリティの向上にも興味を持って活動しております。
にほんブログ村 デザインブログへ
カテゴリ一覧
忍者ブログ [PR]
Powered by "Samurai Factory"