ポップアップでキャプション表示「Tooltip dinamico」

使用例

• サンプル１（普通にキャプション表示）
• サンプル２（HTMLタグを使って画像を表示）
• サンプル３（独自に幅を指定）
• サンプル４（画像に対してもキャプションを使ってみる）
  
  

ギミック

サンプル１
<a href="#" onMouseOver="toolTip('キャプションは、このように表示されます。キャプションは、このように表示されます。キャプションは、このように表示されます。キャプションは、このように表示されます。キャプションは、このように表示されます。キャプションは、このように表示されます。キャプションは、このように表示されます。キャプションは、このように表示されます。キャプションは、このように表示されます。')" onMouseOut="toolTip()">サンプル１</a>

サンプル２
<a href="#" onMouseOver="toolTip('<img src=pic.jpg><br>画像<br>改行してキャプションを加える事も出来ます。')" onMouseOut="toolTip()">サンプル２</a>

サンプル３
<a href="#" onMouseOver="toolTip('<b>HTML.it</b>: il sito italiano sul Web Publishing', 350)" onMouseOut="toolTip()">サンプル３</a>

サンプル４
<img src="pic.jpg" width="200" height="132" onMouseOver="toolTip('キャプションは、このように表示されます。キャプションは、このように表示されます。キャプションは、このように表示されます。キャプションは、このように表示されます。キャプションは、このように表示されます。キャプションは、このように表示されます。キャプションは、このように表示されます。キャプションは、このように表示されます。キャプションは、このように表示されます。')" onMouseOut="toolTip()"/>

注意点

1. ソース内で、Enterキーを使用した改行をすると、うまく動かなくなるみたいです。
2. 画像を表示される場合は、クオーテーションを省略する事でうまく表示出来るみたいです。
3. この記事の内容について、ご質問は勘弁して下さい。

文字色・背景色をカスタマイズ

tooltip.jsの49〜53行目を、お好みに併せて変更することで、ポップアップの文字色と背景色をカスタマイズ出来ます。
上から、以下のようになります。

1. 横幅（ピクセル）
2. 背景色（16進数）
3. 文字色（16進数）
4. ポップアップのボーダー色（16進数）
5. ポップアップの透明度（％）

this.width = 280; // width (pixels)
this.bgColor = '#333333'; // background color
this.textColor = '#FFFFFF'; // text color
this.borderColor = '#111111'; // border color
this.opacity = 100; // opacity (percent) - doesn't work with all browsers

キャプションの文字サイズをカスタマイズ

とりあえず、tooltip.jsの69行目を以下のようにすれば、キャプションの文字は82%に縮小されます。
※MacのSafariとFirefoxで確認済み。

'<td align=center><font style=font-size:82%; color=' + this.textColor + '>' + this.text + '</font></td></tr></table>';

文字の並び方をカスタマイズ

tooltip.jsの69行目の最初の「center」を「left」に変更することで、中央揃え（デフォルト）を左揃えに変更する事が出来ます。

'<td align=center><font color=' + this.textColor + '>' + this.text + '</font></td></tr></table>';