【Javascript】必要な所にツールチップを表示しよう
<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>