DOJEUN's Notepad
 LISTへ 

【Javascript】必要な所にツールチップを表示しよう

必要な所にツールチップを表示しよう


1. テストした環境

 IE8, IE11

2. テスト方法

 以下のソースでhtmlファイルを作成して
 「名前」の上にマウスを合わせるとその名前がツールチップに
 表示できる。

3. html ソース

<html>
<head><title></title>
<script type="text/javascript">
<!--
//------------------------------------------------------------
// ツールチップ表示
// http://avanka.com/zbxe/880875 ツールチップ表示 
//------------------------------------------------------------
function showtip(pTD){
	tooltip.innerText=pTD.innerText; 
	tooltip.style.display="inline"; 
} 
function hidetip(){
	tooltip.style.display="none";
} 
function movetip(){
	tooltip.style.pixelTop=event.y+document.body.scrollTop; 
	tooltip.style.pixelLeft=event.x+document.body.scrollLeft+10; 
} 
document.onmousemove=movetip; 
//-->
</script>
<style type="text/css"> 
#tooltip{
	position:absolute;
	top:0;
	left:0;
	border:1 solid black;
	background:#FFFFCC;
	color:black;
	font-size:9pt;
	width:50;
	height:20;
	padding:2;
	z-index:10;
	display:none;
}
</style> 
</head>
<body>
<span id=tooltip></span>
<table border=1 id="tb1">
	<thead>
		<tr>
			<th>SEQ</th>
			<th>名前</th>
			<th>電話番号</th>
			<th>記念日</th>
			<th>年齢</th>
		</tr>
	</thead>
	<tbody>
		<tr><td>1</td><td onmouseover="showtip(this);this.style.cursor='e-resize';" onmouseout="hidetip();">Agatha</td><td>20-633-483</td><td>2005/04/28</td><td>46</td></tr>
		<tr><td>2</td><td onmouseover="showtip(this);this.style.cursor='e-resize';" onmouseout="hidetip();">Agnes</td><td>28-492-566</td><td>2005/04/28</td><td>99</td></tr>
		<tr><td>3</td><td onmouseover="showtip(this);this.style.cursor='e-resize';" onmouseout="hidetip();">Aileen</td><td>4-829-679</td><td>2005/04/28</td><td>64</td></tr>
		<tr><td>4</td><td onmouseover="showtip(this);this.style.cursor='e-resize';" onmouseout="hidetip();">Alice</td><td>78-710-373</td><td>2005/04/28</td><td>45</td></tr>
		<tr><td>5</td><td onmouseover="showtip(this);this.style.cursor='e-resize';" onmouseout="hidetip();">Amy</td><td>16-876-228</td><td>2005/04/28</td><td>89</td></tr>
		<tr><td>6</td><td onmouseover="showtip(this);this.style.cursor='e-resize';" onmouseout="hidetip();">Angela</td><td>92-463-202</td><td>2005/04/28</td><td>79</td></tr>
		<tr><td>7</td><td onmouseover="showtip(this);this.style.cursor='e-resize';" onmouseout="hidetip();">Beatrice</td><td>15-992-427</td><td>2005/04/28</td><td>6</td></tr>
		<tr><td>8</td><td onmouseover="showtip(this);this.style.cursor='e-resize';" onmouseout="hidetip();">Bridget</td><td>94-535-674</td><td>2005/04/28</td><td>71</td></tr>
		<tr><td>9</td><td onmouseover="showtip(this);this.style.cursor='e-resize';" onmouseout="hidetip();">Catherine</td><td>22-643-845</td><td>2005/04/28</td><td>11</td></tr>
		<tr><td>10</td><td onmouseover="showtip(this);this.style.cursor='e-resize';" onmouseout="hidetip();">Cordelia</td><td>81-453-903</td><td>2005/04/28</td><td>9</td></tr>
	</tbody>
</table>
</body>
</html>