FIXED:jQuery歴3週間の俺がjQueryUIを使わずにに対してtooltipを付けてみた

jQuery JavaScript

前の奴は幅が狭い列で表示が醜かったので、やっぱり書きなおし。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に改めました。

お約束の超絶参考文献

WEB+DB PRESS Vol.60

WEB+DB PRESS Vol.60

の「jQuery実践入門」です！