前の記事 ≪:3Dの質感が詳細で美しいWEBアイコンセット
次の記事 ≫:CSSのrotationを使った時計「CSS Clock」

画像付きのオシャレなツールチップを実装できるjQueryプラグイン「TinyTips」

2010年03月01日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法
jQuery Plugin: TinyTips 1.0 | Mike Merritt | Digital Inferno

画像付きのオシャレなツールチップを実装できるjQueryプラグイン「TinyTips」。
TinyTipsを使えば、リンクにカーソルを合わせると次のように半透明がかかった感じで画像が入ったクールなツールチップが簡単に実装できます。



実装は次のように簡単に出来ます。

まず、<a>タグのtitleをツールチップとして使うには、tinyTipsメソッドの引数にtitleをわたします
$(element).tinyTips('title');

タグを入れたい場合は次のように引数にそのままタグを入れてあげればOKです。
$(element).tinyTips('<img src="images/demo-image.jpg" /><br />You can even put images or any other markup in the tooltips.');

関連エントリ
関連の記事検索:jQuery, Webデザイン, 画像
スポンサード リンク

By.KJ : 2010年03月01日 10:05 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)