読者です 読者をやめる 読者になる 読者になる

感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

jQueryでツールチップを自作&カスタマイズして表示させてみるサンプル

<スポンサーリンク>

ツールチップって?

ツールチップとは、補足情報を表示するための吹き出しのこと。
何か注意書きをするときに、カーソルを当てたときにフワッと浮き出る感じになる。
サンプルの画像のイメージはこんな感じ。

サンプルコード

まずは、プラグイン風にツールチップの機能を作るJavaScript
mytooltip.jsとする。

$.fn.myToolTip = function(options) {
	var toolTip = $('<div id="myToolTip"></div>').hide();
	$('body').append(toolTip);

	$(this).filter(function() {
		return this.title || this.alt;
	}).each(function() {

		var self = $(this);
		var target = this.title ? 'title' : 'alt';
		var tipText = self.attr(target);

		self.hover(function(e) {
			self.attr(target,'');
			toolTip
				.stop(true,true)
				.fadeIn('fast')
				.text(tipText)
				.css({
					position: 'absolute',
					top: e.pageY - 50,
					left: e.pageX + 30
				})	
		},function(){
			self.attr(target, tipText);
			toolTip.fadeOut('fast');
		}).mousemove(function(e) {
			toolTip.css({
				top: e.pageY - 50,
				left: e.pageX + 30
			});
		});
	});
}

「hover」の部分はカーソルを合わせた時の表示の位置や動きを設定している。
「mousemove」の部分はマウスを動かしたときの動きを設定している。

で、次に、表示されるツールチップの色とか、文字とかをCSSで設定する。
common.css

div#myToolTip {
	margin: 0 1em 0 0;
	padding: .7em 1em;
	color: #fff;
	background: #1E90FF;
	font-size: 90%;
}

ここでCSSを使うことで、自分好みのツールチップを作成することができる。

では、これらを使ったHTMLのサンプルは?

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Alert Dialogs</title>
<link rel="stylesheet" type="text/css" href="css/common.css" />
<script src="js/jquery.min.js"></script>
<script src="js/mytooltip.js"></script>
<script>
$(function() {
	$('#name').myToolTip();
});
</script>
</head>
<body>
<h1>ツールチップを表示する</h1>
<br />
<br />
名前:<input type="text" title="名前を入力してね!" value="" id="name">
</body>
</html>

こんな感じで、ツールチップを表示させたい要素を指定することで、そこにカーソルがあたったときにツールチップを表示させることができる。

<script>
$(function() {
	$('#name').myToolTip();
});
</script>

この方法のいいところは、アレンジが簡単なことと、応用が効きやすいところだ。

今日、勉強した本

jQuery逆引きマニュアル Webデザインの現場で役立つ基本と実践

jQuery逆引きマニュアル Webデザインの現場で役立つ基本と実践


2010年に書かれた本で若干古い情報もあるけれど(jAlertの部分とか、もうサンプルは使えなかった・・・)、やっぱり実践的ですごく役に立つ本。
基礎的な本をひと通り読み終わったから、こういう本で応用を学びたかった。
基礎を身につけた後に、現場でリファレンス的に使える本だと思う。

感謝のプログラミング

今回で感謝のプログラミングは【668時間目】
10000時間まで、あと【9332時間】