cluetipによるツールチップ表示

jQuery

パソコンソフトのマニュアルをまともに読む人はどれだけいるだろう。Webシステムもそれは同じだ。
Webベースなのだから、システムそのものが使い方をaffordする(教えてくれる)のが望ましい。

具体的にはちょっとしたツールチップでもあればいい。といってもHTMLに自分でしこしこ書くのは大変だ。なにか適当なキーをつけておき、キーに対応するツールチップのデータは別ファイルに出しておいてそいつを表示させたい。ということでjQueryのプラグインを使う。

tooltipというそのものズバリのもあるが、外部ファイルの読み込みは面倒そうなので、cluetipを使うことにした。
でもこれ標準だと、ツールチップを外部ファイルにする場合は、１つのツールチップごとに１個のhtmlを生成しないといけない。そこでちょっと書き足してみた。

まずhtml本体。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="../lib/jquery-1.2.6.min.js" ></script>
<script src="../lib/jquery.bgiframe.min.js" ></script>
<script src="../lib/jquery.dimensions.js" ></script>
<script src="../lib/jquery.hoverIntent.js" ></script>
<script src="../lib/jquery.cluetip.js" ></script>
<script src="example.js" ></script>
<link rel="stylesheet" href="../lib/jquery.cluetip.css" type="text/css" />
<title>Example</title>
<style type="text/css">
 table { border-collapse: collapse; }
 th {background-color: black; color: white; border: 1px solid black;}
 td {background-color: lightyellow; border: 1px solid black;}
</style>
</head>
<body>

<table>
<tr><th>ID</th><th>国名<img class="tooltip" title="country" /></th><th>大陸<img class="tooltip" title="continent"/></th></tr>
<tr><td>1</td><td>フランス</td><td>ユーラシア</td></tr>
<tr><td>2</td><td>ブラジル</td><td>南米</td></tr>
</table>


</body>
</html>

ツールチップのhtmlを用意する。

<html><body>
<div class="container">
 <div id="country">
  <h3>国名</h3>
  国または地域の略名をあらわします。
 </div>
 
 <div id="continent">
  <h3>大陸</h3>
  国または地域の属する大陸をあらわします。
  <img src="world.gif" />
  </div>
</div>

</body></html>

class="container"なdivはなぜかないと動作しなかった。

$(function() {
	$('.tooltip')
	.attr('src', 'help.gif')
	.each(function(i,e) {
		var $e = $(e);
		$e.data('target', $e.attr('title'));
		$e.attr('title', 'help.html');
	}).cluetip({
		fx: { open: 'fadeIn', openSpeed: 'fast'
		},
		attribute: 'title',
		width: '350px',
		onActivate: function(e) {
			$(this).data('myID', $(e[0]).data('target'));
			return true;
		},
		ajaxProcess: function(data) {
			var myID = $(this).data('myID');
			return $(data).find('#'+myID).html();
		},
		ajaxCache: false
	});
	
});