上からスライドしてくるツールチップ

テキストにマウスオーバーすると、上からスライドしながらツールチップが表示されるような動きを実装していきたいと思います。

まずは、必要なソースをダウンロードしてください。

HTMLを記述

<div class="tTip" title="ピョコっと吹き出しが出ましたか？">ここにマウスを載せてください！</div>

1	<div class="tTip" title="ピョコっと吹き出しが出ましたか？">ここにマウスを載せてください！</div>

対象となるテキストを囲う要素<div>に対し、クラス名「tTip」を指定します。クラス名を変更する場合は「jquery.betterTooltip.js」の方も修正してください。そのままであれば変更の必要はありません。

jQueryと「jquery.betterTooltip.js」を読み込む

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery.betterTooltip.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('.tTip').betterTooltip({speed: 300, delay: 100});
	});
</script>

$(document).ready(function(){

$('.tTip').betterTooltip({speed: 300, delay: 100});

});

</script>

オプションとして「speed」「delay」をお好みで設定してみてください。

CSSを記述

.tTip {
	width: 300px;
	position: absolute;
	left: 50px;
	top: 150px;
	cursor: pointer;
	color: #666;
	font-weight: bold;
}
.tip {
	background:#1b1b1b;
	padding:15px;
	display: none;
	position: absolute;
	z-index: 500;
	font-size:80%;
	text-shadow:none;
	color:#aaa;
}

.tTip {

width: 300px;

position: absolute;

left: 50px;

top: 150px;

cursor: pointer;

color: #666;

font-weight: bold;

}

.tip {

background:#1b1b1b;

padding:15px;

display: none;

position: absolute;

z-index: 500;

font-size:80%;

text-shadow:none;

color:#aaa;

}

CSSでツールチップを出したい場所や、ツールチップ自体の形状を指定します。

これで完了です。

後はそれぞれお好みの設定でカスタマイズしてみてください。