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

Post on:2008年5月9日

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

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

<textarea name="code" class="html" cols="60" rows="5">
<a href="http://cssglobe.com" class="tooltip" title="Web Standards Magazine">Roll over for tooltip</a>
</textarea>

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

</textarea>

画像を拡大表示するツールチップ

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

<textarea name="code" class="html" cols="60" rows="5">
<a href="1.jpg" class="preview"><img src="1s.jpg" alt="gallery thumbnail" /></a>
</textarea>

</textarea>

リンク先のサイトのキャプチャを表示するツールチップ

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

<textarea name="code" class="html" cols="60" rows="5">
<a href="http://www.cssglobe.com" class="screenshot" rel="cssg_screenshot.jpg">Css Globe</a>
</textarea>