FIXED:jQuery歴3週間の俺がjQueryUIを使わずにに対してtooltipを付けてみた
前の奴は幅が狭い列で表示が醜かったので、やっぱり書きなおし。orz
ソースを晒しておく
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>jQuery tooltip TEST</title> <style type="text/css"> td { border-style: solid; border-width:1px; border-color: #000000; } .error { background-color: #eebbbb; } .normal { background-color: #eeffff; } span.tooltip { position: absolute; top: -10000px; left: -10000px; display: none; border-style: solid; border-width:1px; border-color: #000000; background-color: #ffffe1; font-size:small; padding:0.2em; z-index:999; } </style> </head> <body> <table> <col style="width:6em;text-align:left;vertical-align:top" /> <col style="width:12em;text-align:center;vertical-align:middle" /> <col style="width:14em;text-align:center;vertical-align:middle" /> <col style="width:16em;text-align:right;vertical-align:bottom" /> <tr> <td id="r1c1" class="error">エラーを<br />含む値です</td> <td id="r1c2" class="error">エラーを含む値っぽい</td> <td id="r1c3" class="normal">ちょ、正常らしいぞ</td> <td id="r1c4" class="error">エラーを含む値らしい</td> </tr> <tr> <td id="r2c1" class="error">エラーを<br />含む値??</td> <td id="r2c2" class="error">エラーを含む値。orz</td> <td id="r2c3" class="normal">ちょ、正常っぽい</td> <td id="r2c4" class="error">エラーを含む値かよー</td> </tr> </table> <span id="tooltip_r1c1" class="tooltip">エラーだってよーーーーーーーーーーーーーー</span> <span id="tooltip_r1c2" class="tooltip">エラーだってさ・・・・・・・・・・・・・・・・・・</span> <span id="tooltip_r1c4" class="tooltip">エラーだって????????????????????</span> <span id="tooltip_r2c1" class="tooltip">エラーらしいぜ!!!!!!!!!!!!!!!!!!!!!!</span> <span id="tooltip_r2c2" class="tooltip">エラーだって。。。。。。。。。。。。。。。。orz</span> <span id="tooltip_r2c4" class="tooltip">エラーかよ〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜</span> <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script> <script language="javascript" type="text/javascript"> $(function() { var offsetTop = $("table").attr('offsetTop') + 5; var offsetLeft = $("table").attr('offsetLeft') + 5; $("td.error").hover(function() { var cell = $(this); var top = cell.attr('offsetTop') + offsetTop; var left = cell.attr('offsetLeft') + offsetLeft; var tooltip = $('#tooltip_' + cell.attr('id')); tooltip.css('top', top); tooltip.css('left', left); tooltip.show(); }, function() { var cell = $(this); var tooltip = $('#tooltip_' + cell.attr('id')); tooltip.hide(); }); }); </script> </body> </html>
何が不味かったのか
tooltipの<span>が<td>の中に居たから、
tooltipの文章が長い場合に無理やり折り返されてたのが諸悪の根源。
今回は、<td>とtooltipの<span>の紐付けをidに改めました。
お約束の超絶参考文献
- 作者: まつもとゆきひろ,西尾泰和,山田憲晋,城戸忠之,増井俊之,羽生章洋,uupaa,ミック,塙与志夫,原悠,奥一穂,はまちや2,大沢和宏,吾郷協,浜本階生,中島拓,中島聡,矢野りん,角田直行,能登信晴,田村哲也,吉村譲,結城亜砂子,角谷信太郎,石橋秀仁,WEB+DB PRESS編集部
- 出版社/メーカー: 技術評論社
- 発売日: 2010/12/22
- メディア: 大型本
- 購入: 12人 クリック: 185回
- この商品を含むブログ (24件) を見る