jQueryプラグイン、Darktooltipを使った画像入りツールチップのメモ

リンクリストが縦に並んでいて、マウスホバーで画像とちょっとしたテキストの情報が見えるようになりませんか？　という依頼があったので、ツールチップで出来るのかなぁと思って調べて、やってみたメモです。

完成図

• 実際に動くデモはこちら

※マウス操作環境でお試し下さい。IEは8以上で動きました。

使ったプラグイン

• Darktooltip

こちらの「HTML content」を利用して作りました。

コード

jQuery と 上記プラグインの js, css を読み込むところは割愛します。アニメーションなど、細かい設定は darktooltip.min.js では一部無いみたいだったので、今回は darktooltip.js のほうを使わせてもらいました。

jQuery

<script>
$(document).ready( function(){
	$('.toolchip').darkTooltip({
		animation:'fadeIn',
		gravity:'west',
		theme:'light',
	});
});
</script>

右側に出るように「west」で。「ダーク」ツールチップと謳っているのに、themeを「light」にしていますw

html

<ul>
	<li><a href="#" class="toolchip" data-tooltip="#tip1">リスト1</a></li>
	<li><a href="#" class="toolchip" data-tooltip="#tip2">リスト2</a></li>
	<li><a href="#" class="toolchip" data-tooltip="#tip3">リスト3</a></li>
	<li><a href="#" class="toolchip" data-tooltip="#tip4">リスト4</a></li>
	<li><a href="#" class="toolchip" data-tooltip="#tip5">リスト5</a></li>
</ul>
<div id="tip1">
	<img class="tip-i" src="images/1.jpg" width="50" height="50" alt="image1" />
	<p class="tip-p">サンプルテキスト1</p>
</div>
<div id="tip2">
	<img class="tip-i" src="images/2.jpg" width="50" height="50" alt="image2" />
	<p class="tip-p">サンプルテキスト2</p>
</div>
<div id="tip3">
	<img class="tip-i" src="images/3.jpg" width="50" height="50" alt="image3" />
	<p class="tip-p">サンプルテキスト3</p>
</div>
<div id="tip4">
	<img class="tip-i" src="images/4.jpg" width="50" height="50" alt="image4" />
	<p class="tip-p">サンプルテキスト4</p>
</div>
<div id="tip5">
	<img class="tip-i" src="images/5.jpg" width="50" height="50" alt="image5" />
	<p class="tip-p">サンプルテキスト5</p>
</div>

ul の中に div を入れるのは良くないかなぁと思ったので、こんな感じで…。

余談ですが、各 div 内の img と p の css を適用させるのに、

<div id="tip1">
	<img src="images/1.jpg" width="50" height="50" alt="image1" />
	<p>サンプルテキスト1</p>
</div>

#tip1 img{ /* 略 */ }
#tip1 p{ /* 略 */ }

こういう書き方ではどうもうまくいかなくて、img と p それぞれに class を入れて適用させました。

css

.tip-i{
	float:left;
	margin-right:5px;
	}
.tip-p{
	width:150px;
	font-size:80%;
	line-height:15px;
	}

文字を回り込ませたりとか、簡単なことしかしてませんが。

以上です！　どなたかのご参考になれたら幸いですー！