jQueryとJSONで作るリッチツールチップ

json0907141.jpg

WebAppersより、jQueryとJSONで作るリッチツールチップの紹介です。

デモページはこちらから

設置方法は、下記のソースのようにhead要素に外部CSSとJSファイルを設置します。

<link rel="stylesheet" href="json-tooltip.css"/>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="json-tooltip.js"></script>

HTMLのマークアップは下記のようになります。

<div id="wrapper">
<div id="banner">
	<h1>Go On</h1>
	<p>Hover over a link below</p>
</div>

<p>The link in this sentence will <a href="#" class="tooltip" rel="0">display a tooltip</a> on hover.</p>
<p>If you're feeling adventurous, you could always give<a href="#" class="tooltip" rel="1">this link a try</a> too!</p>
</div>

CSSのソースですが、#bannerさえしっかりと押さえておけば問題ないでしょう。

*{margin:0; padding:0;}

body{font-family:georgia; background:#191919;}

p{padding:0px 30px; font-size:13px; margin-bottom:15px; line-height:1.6em;}

a{padding:3px 6px; background:#333; color:#FFF; margin:0px 3px; text-decoration:none;}
a:hover{color:#FFC125;}

#wrapper{margin:10px auto; width:960px; padding-bottom:30px; background:#FFF; border:1px solid ##F7F7F7;}
#banner{background:#DDD url('purple-bg.jpg') no-repeat top left; height:300px; text-align:center; margin-bottom:30px; border-bottom:1px solid #CCC;}
#banner h1{padding:55px 0px 15px 0px; font-size:60px; font-family:Arial, sans-serif; letter-spacing:-3px}
#banner p{color:#333; font-size:16px;}

以下、JSONとjQueryのソースです。

//JSON banner content array
var banner_data = {
	//Tooltips
	"tooltips" : [
		{
			//Array ID -> 0
			"Title"   : "Oh Yes",
			"Content" : "That's some good hovering.",
			"ImageURL"   : "yellow-bg.jpg"
		},

		{
			//Array ID -> 1
			"Title"   : "Nice",
			"Content" : "You found link number 2",
			"ImageURL"   : "orange-bg.jpg"
		}
	]
}
// Image Preloader via http://www.innovatingtomorrow.net/2008/04/30/preloading-content-jquery
	jQuery.preloadImages = function()
	{
	  for(var i = 0; i").attr("src", arguments[i]);
	  }
	}

//Actual jQuery starts here on document ready
	$(document).ready(function() {

		//Goes through each tooltip's image URL
		for(var i = 0; i < banner_data.tooltips.length; i++){

			image_location = banner_data.tooltips[i].ImageURL;

			//Preload if location exists
			if (image_location != ''){
			$.preloadImages(image_location);
		};
	};
});