【ツールチップ】クリッカブルマップをマウスオーバーでマウスに追従

日本地図の画像に設定したクリッカブルマップをマウスオーバーすると、マウスに追従するツールチップが表示されます。クリッカブルマップはjQueryプラグインのjquery.rwdImageMaps.jsでレスポンシブ対応しています。

htmlのコードは下記になります。
クリッカブルマップの各地域別のareaタグにclassを、ツールチップの各地域別のdivタグにidを付与します。

<div><img src="images/map.gif" usemap="#ImageMap" alt="日本地図" class="map_link">
<map name="ImageMap">
	<area shape="rect" coords="316,32,415,102" href="#">
	<area shape="rect" coords="317,109,396,208" href="#" class="area_tohoku">
	<area shape="poly" coords="317,209,317,307,338,307,338,284,374,284,374,307,395,307,395,209" href="#" class="area_kanto">
	<area shape="rect" coords="231,181,318,231" href="#" class="area_hokuriku">
	<area shape="rect" coords="232,230,316,308" href="#" class="area_tokai">
	<area shape="rect" coords="181,181,232,314" href="#" class="area_kinki">
	<area shape="rect" coords="106,180,182,247" href="#" class="area_chugoku">
	<area shape="rect" coords="105,254,174,308" href="#" class="area_shikoku">
	<area shape="poly" coords="31,189,31,234,53,234,53,326,97,326,97,189" href="#" class="area_kyusyu">
	<area shape="rect" coords="34,347,68,373" href="#" />
</map>
	<div id="p_tohoku" class="p_box">
		<p class="p_title">東北</p>
		<div class="p_txt">
		<ul>
		<li>青森県</li>
		<li>岩手県</li>
		<li>宮城県</li>
		<li>秋田県</li>
		<li>山形県</li>
		<li>福島県</li>
		</ul>
		</div>
	</div>
	<div id="p_kanto" class="p_box">
		<p class="p_title">関東</p>
		<div class="p_txt">
		<ul>
		<li>茨城県</li>
		<li>栃木県</li>
		<li>群馬県</li>
		<li>埼玉県</li>
		<li>千葉県</li>
		<li>東京都</li>
		<li>神奈川県</li>
		</ul>
		</div>
	</div>
	<div id="p_hokuriku" class="p_box">
		<p class="p_title">北陸</p>
		<div class="p_txt">
		<ul>
		<li>新潟県</li>
		<li>富山県</li>
		<li>石川県</li>
		<li>福井県</li>
		</ul>
		</div>
	</div>
	<div id="p_tokai" class="p_box">
		<p class="p_title">東海</p>
		<div class="p_txt">
		<ul>
		<li>長野県</li>
		<li>山梨県</li>
		<li>静岡県</li>
		<li>愛知県</li>
		<li>岐阜県</li>
		<li>三重県</li>
		</ul>
		</div>
	</div>
	<div id="p_kinki" class="p_box">
		<p class="p_title">近畿</p>
		<div class="p_txt">
		<ul>
		<li>滋賀県</li>
		<li>奈良県</li>
		<li>京都府</li>
		<li>大阪府</li>
		<li>和歌山県</li>
		<li>兵庫県</li>
		</ul>
		</div>
	</div>
	<div id="p_chugoku" class="p_box">
		<p class="p_title">中国</p>
		<div class="p_txt">
		<ul>
		<li>鳥取県</li>
		<li>島根県</li>
		<li>岡山県</li>
		<li>広島県</li>
		<li>山口県</li>
		</ul>
		</div>
	</div>
	<div id="p_shikoku" class="p_box">
		<p class="p_title">四国</p>
		<div class="p_txt">
		<ul>
		<li>徳島県</li>
		<li>香川県</li>
		<li>愛媛県</li>
		<li>高知県</li>
		</ul>
		</div>
	</div>
	<div id="p_kyusyu" class="p_box">
		<p class="p_title">九州</p>
		<div class="p_txt">
		<ul>
		<li>福岡県</li>
		<li>佐賀県</li>
		<li>長崎県</li>
		<li>熊本県</li>
		<li>大分県</li>
		<li>宮崎県</li>
		<li>鹿児島県</li>
		</ul>
		</div>
	</div>
</div>

続いてCSSのコードです。
ツールチップの各地域別のdivタグは非表示にします。また、ツールチップ共通のclassであるクラス名p_boxにposition: absolute;を設定します。leftとtopはjQueryで指定するためCSSでは設定しません。それ以外はツールチップの装飾です。

#p_tohoku,
#p_kanto,
#p_hokuriku,
#p_tokai,
#p_kinki,
#p_chugoku,
#p_shikoku,
#p_kyusyu {
	display: none;
}
.p_box {
	width: 200px;
	position: absolute;
	background: #f7f7f7;
	padding: 0 1px;
	border-radius: 0 0 10px 10px;
	box-shadow: 0px 2px 2px #e6e6e6;
}
.p_box .p_title {
	border-top: 2px solid #006cb8;
	border-bottom: 1px solid #e6e6e6;
	text-align: center;
	margin: 0;
	line-height: 2.5;
}
.p_box .p_txt {
	padding: 15px 5px;
}
.p_box ul {
	width: 90%;
	margin: 0;
	padding: 0 0 0 10%;
	overflow: hidden;
}
.p_box ul li {
	float: left;
	width: 42%;
	margin: 0 0 0 8%;
	font-size: .8em;
}

最後にjQueryのコードです。
まず各地域別に、クリッカブルマップをマウスオーバーでツールチップを表示・非表示する処理を記述します。
次に日本地図の画像マウスオーバー時に、ツールチップの表示位置を指定する処理を記述します。mousemove内にevent.clientXとevent.clientYを記述することで、ユーザーのマウス移動時のX座標とY座標を取得します。ツールチップがちょうどマウスの右下に追従するように、X座標に5を加算、Y座標に5とスクロール位置を加算します。取得した座標はツールチップ共通のクラス名p_boxのCSS、leftとtopに代入します。マウスが移動するとleftとtopの位置も更新されるため、ツールチップが追従する動きになります。

$(function() {
	$('.area_tohoku').hover(function() {
		$("#p_tohoku").show();
	},function() {
		$("#p_tohoku").hide();
	});
	$('.area_kanto').hover(function() {
		$("#p_kanto").show();
	},function() {
		$("#p_kanto").hide();
	});
	$('.area_hokuriku').hover(function() {
		$("#p_hokuriku").show();
	},function() {
		$("#p_hokuriku").hide();
	});
	$('.area_tokai').hover(function() {
		$("#p_tokai").show();
	},function() {
		$("#p_tokai").hide();
	});
	$('.area_kinki').hover(function() {
		$("#p_kinki").show();
	},function() {
		$("#p_kinki").hide();
	});
	$('.area_chugoku').hover(function() {
		$("#p_chugoku").show();
	},function() {
		$("#p_chugoku").hide();
	});
	$('.area_shikoku').hover(function() {
		$("#p_shikoku").show();
	},function() {
		$("#p_shikoku").hide();
	});
	$('.area_kyusyu').hover(function() {
		$("#p_kyusyu").show();
	},function() {
		$("#p_kyusyu").hide();
	});
	$('.map_link').hover(function() {
		$(window).mousemove(function() {
			var mouse_x = event.clientX + 5;
			var mouse_y = $(window).scrollTop() + event.clientY + 5;
			$(".p_box").css({
				"left": mouse_x,
				"top": mouse_y
			});
		});
	});
});