リンクにマウスオーパーしたときに吹き出し表示されるTooptip。
さまざまな種類のTooptipが出回っております。
使い方はほとんど同じとなると思うのですが、
いろいろなデザインがあるので、試していってみたいと思います。
[CoolTips]
http://www.wildbit.com/labs/cooltips/
prototype.jsベースのツールチップライブラリです。
角が丸く、半透明のツールチップを表示します。
画像を使用していないので、扱いやすく、軽量です。
[ファイルのダウンロードと設定]
http://www.wildbit.com/labs/cooltips/
からCoolTips 1.0をダウンロードします。（ダウンロードファイルはtooltips1.0.zip）
中にはCoolTips用のJavascriptファイル・CSSファイルのほか、
prototypeとscript.aculo.usのJavascriptファイルが入っています（libフォルダ）
prototypeやscript.aculo.usを既に使用している場合は、libフォルダのアップは不要です。
既にアップしているフォルダ先を指定することになります。
// JavaScriptの指定
<script type="text/javascript" src="xxx/prototype.js"></script>
<script type="text/javascript" src="xxx/scriptaculous.js?load=builder,effects"></script>
<script type="text/javascript" src="xxx/tooltips.js"></script>
// CSSの指定
<link rel="stylesheet" href="xxx/tooltips.css" type="text/css" media="screen" />
[実装方法]
tooltipを適用したい部分にidまたはclass指定をし、
idまたはclassを引数としたTooptipオブジェクトを生成します。
idの場合は引数をid名とすればOKです。
// リンク部分
<a href='#' title='Tooptipで表示させたい文字列' id='test'>Click here</a>
// Tooptipオブジェクトを生成
<script type="text/javascript">
new Tooltip('test');
</script>
Click here
class指定の場合は、次の関数を使用してTooptipオブジェクトを生成します。
// リンク部分
<a href='#' title='Tooptipで表示させたい文字列' class='test_class'>Click here</a>
<a href='#' title='Tooptipで表示させたい文字列' class='test_class'>クリック★</a>
<a href='#' title='Tooptipで表示させたい文字列' class='test_class'>☆☆☆☆</a>
// Tooptipオブジェクトを生成
<script type="text/javascript">
$$(".test_class").each( function(links) {
new Tooltip(links, {backgroundColor: "#FF80B8", borderColor: "#E60066", textColor: "#A10048", textShadowColor: "#FFBFDC"});
});
</script>
Click here クリック★ ☆☆☆☆
[関数解説]
◇$$("ｘｘｘ")：
class名を入れます。CSSで指定するときと同じ方法です。
◇.each：
prototype.jsのeach関数です。指定したclass名のオブジェクトを走査します。
◇ function(ｘｘｘ)：
Tooptipを生成するためのfunctionを定義しています。
引数となるオブジェクト名は任意です。Tooptipオブジェクトを生成するときの引数になります。
[Tooptipカスタマイズ]
上のサンプルでもわかるように、表示するTooptipの色は自由にカスタマイズできます。
Tooptipオブジェクトを生成するときの二番目の引数に配列で定義します。
次のオプションの指定が可能です。
＜tooltips.cssでデフォルト設定されているもの＞
◇ backgroundColor ：Tooptipの背景色
◇ borderColor ： Tooptipを囲むボーダー色
◇ textColor ： Tooptipの文字色
◇ textShadowColor ： Tooptipの文字の影となる色（Safariのみ）
＜その他＞
◇ maxWidth ： Tooptipの最大横幅（pixels） デフォルトは250px
◇ delay ： マウスオーバーしてからTooptipを表示するまでの時間（ミリ秒） デフォルトは250
◇ mouseFollow ： カーソルの移動と共にTooptipを移動させる（true/false） デフォルトはtrue
◇ opacity ： Tooptipの透明度 デフォルトは75
◇ appearDuration ： 表示エフェクトにかかる時間（秒） デフォルトは0.25
◇ hideDuration ： 非表示エフェクトにかかる時間（秒） デフォルトは0.25
<script type="text/javascript">
new Tooltip('terako' , {backgroundColor: "#008F00", borderColor: "#00CC00", textColor: "#BFFFBF", textShadowColor: "#80FF80" , maxWidth:150 , delay:500 , mouseFollow:false , opacity:50 , appearDuration:1 , hideDuration:2});
</script>
全てをカスタマイズしてみるとかなり感じが変わりますね。お好みのTooptipができそうです。
寺子屋未満をよろしくお願いします。