jQuery利用の軽量吹き出しJavaScript「tinyTips」

画像やテキストの説明、またリンクの説明としてツールチップと呼ばれる吹き出しを表示させることがあります。
JavaScriptライブラリのjQueryを使用して、軽量かつデザイン性があるツールチップjQuery Plugin: TinyTips 1.1 | Mike Merritt | Digital Infernoを紹介します。
jQuery利用の軽量吹き出しJavaScript「tinyTips」サンプル

使用方法
jQuery Plugin: TinyTips 1.1 | Mike Merritt | Digital Infernoからファイルをダウンロードします。
<link rel="stylesheet" href="tinyTips.css" type="text/css" media="screen" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.tinyTips.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('class名').tinyTips(
'light', //他には、red,yellowなどCSSにあるものであれば使用可能
'title' //ツールチップの対象にしたい属性
);
});
</script>

上記を記述したら、あとはclass名を付与すれば完成です。
<a class="class名" href="#" title="表示させたい内容">テキスト</a>

また、画像を表示させることも可能です。
<script type="text/javascript">
$(document).ready(function(){
$('class名').tinyTips(
'yellow',
'<img src="画像パス" /><br />画像もあっぷ!'
);
});
</script>


jQuery利用の軽量吹き出しJavaScript「tinyTips」サンプル

sponsors

「jQuery利用の軽量吹き出しJavaScript「tinyTips」」をシェアする

記事作成:
記事URL:

TOP > > > jQuery利用の軽量吹き出しJavaScript「tinyTips」