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

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

使用方法

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>

サンプル

Aenean ut nunc metus, gravida tincidunt libero. tortor,

Javascriptサンプルページ一覧

skuare.net