Container Family: Simple Tooltip Example

Ajax Javascript YUI Container Tooltip

このExampleでは、Tooltipの簡単な作り方が示されている（たしかに簡単に作れる）。

Tooltip（ツールチップ）とは、YUIの上記リンクによれば、

The standard tooltip interaction pattern involves a small overlay that is displayed when the mouse hovers over a context element for a specified amount of time.（YUIのExample； Container Family: Simple Tooltip Exampleより引用）コンテキスト要素にマウスオーバーした際に、一定の時間表示されるもの

と定義されている。

先の例に書いたように、YAHOO.widget.TooltipはYAHOO.widget.Overlayの子孫にあたる。
Overlayとの違いとしては、

があげられる。

上記の定義から、Tooltipはコンテキスト要素（よく出てくる割に訳しづらい単語だが、漠然と「コンテンツ・エレメント」と同様の意味と捉えていいと思う）に対して設定するが、どのコンテンツに、どのようなテキストを表示するかは、インスタンス化する際にコンフィグ・パラメータとして設定するだけでよい。パラメータは以下。

パラメータ 意味
context どのコンテキストにマウスオーバーした際に表示するかを指定する。idかelementの参照を設定する。
text マウス・オーバーした際に表示するテキスト。指定しなかった場合、コンテキストのtitleをこの値とみなす
showdelay マウスオーバーしてから表示するまでの時間。デフォルト値は200msec。
hidedelay マウスアウトしてから消えるまでの時間。デフォルトは250msec。
autodismissdelay 表示してから自動的に消えるまでの時間。デフォルトは5000msec=5sec。

サンプルの初期画面は以下。
オレンジ色の矩形と、リンクが、tooltipのターゲットとなるコンテキスト。

オレンジの矩形にマウスオーバーすると、Tooltipが現れる。このツールチップはコンフィグ・パラメータで表示するテキストを指定している。
表示テキストに「黄色な矩形に囲まれるようなスタイル」が適用されていることが分かる。
YUIのExampleでは、beforeShowイベント（YAHOO.widget.Overlayの親たるYAHOO.widget.Moduleから継承）でloggerをつかってログを吐き出すようにしているが、このサンプルでは、id=logのdivに出すようにした。この要素にマウスオーバーすると、ログ（緑の文字）が表示される。

リンクにマウスオーバーすると、下のようなTooltipが現れる。
このTooltipのテキストは、aタグのtitle属性から拾ってきている。
このリンクにマウスオーバーしても、ログは表示されない。

以下に、Javascriptを含むHTMLの全文を示す。

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<TITLE>Ajax_Sampling</TITLE>

<style type="text/css">
body {
	margin:0;
	padding:0;
}
</style>

<link rel="stylesheet" type="text/css" href="scripts/yui/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="scripts/yui/container/assets/skins/sam/container.css" />
<script type="text/javascript" src="scripts/yui/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="scripts/yui/container/container-min.js"></script>

<style type="text/css" id="defaultstyle">
#container {
	margin: 2px;
	padding: 3px;
	width: 400px;
	height: auto;
	border:1px dashed #999999;
}

#ctx { 
	background:orange;
	width:200px;
	height:200px; 
}

a hover { 
	cursor:pointer;
}

</style>

<script type="text/javascript">
YAHOO.namespace("example.container");

YAHOO.example.container.SimpleTooltip = function() {
	var tt1,tt2;
	var Dom = YAHOO.util.Dom;
			
	return{
    	init: function() {
			tt1 = new YAHOO.widget.Tooltip("tt1", 
					{ 	context:"ctx", 
						text:"これはconfigの'text'プロパティーで設定した文です"
					}
			);

			tt1.beforeShowEvent.subscribe(function(){
				Dom.get('log').innerHTML += 
					'<hr><font color="green">Tooltipが現れますよ</font>';
//				YAHOO.log("Tooltip one is appearing.","info","example");
				});
			
			tt2 = new YAHOO.widget.Tooltip("tt2", 
					{ context:"link" }
			);
		}
	};
}();
		
//DOMが完全にloadされたら、サンプルを初期化する。
YAHOO.util.Event.onDOMReady(
		//DomReadyイベントで発火するハンドラ
		YAHOO.example.container.SimpleTooltip.init,
		//ハンドラに渡すオブジェクト（関数）
		YAHOO.example.container.SimpleTooltip,
		//ハンドラは、上記のオブジェクトのスコープをもつ。   
		true
);
</script>
</HEAD>

<BODY class="yui-skin-sam">
<div id="container">
<p>
簡単なTooltipのサンプルです。
</p>
<p id="ctx">マウスを重ねるとtooltipがでます。</p>

<p>
<a id="link" href="http://www.yahoo.com/" title="これはaタグの'title'属性で設定した文です">
マウスを重ねるとtooltipがでます。
</a>
</p>
<!-- 以下にログを出します。 -->
<div id="log">
</div>

</div>
</BODY>