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

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

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


完成図

150211-1

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

使ったプラグイン

こちらの「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;
	}

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

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

公開日:2015/02/11

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

コメントは承認制ですので、反映までしばらくお待ち下さい。(稀にスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。)