[JS]jQueryで実装するテキスト・画像・サイトのツールチップ

CSS Globeのエントリーから、jQueryで実装するツールチップ3つを紹介します。

シンプルなテキストのツールチップ

ボックスにテキストを表示するツールチップです。ボックスはマウスに追従します。
デモ：テキスト

<a href="http://cssglobe.com" class="tooltip" title="Web Standards Magazine">Roll over for tooltip</a>

画像ギャラリーのように画像を拡大表示します。キャプションは有り版・無し版があります。
デモ：画像

<a href="1.jpg" class="preview"><img src="1s.jpg" alt="gallery thumbnail" /></a>

キャプチャ画像は自動取得ではなく、あらかじめ用意する必要があります。これもキャプションの有り版・無し版があります。
デモ：サイト

<a href="http://www.cssglobe.com" class="screenshot" rel="cssg_screenshot.jpg">Css Globe</a>

Post on:2008年5月9日