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

JavaScript jQuery

とりあえず、ソースを晒しておく

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery tooltip TEST</title>
<style type="text/css">
td {
  width: 12em;
  border-style: solid;
  border-width:1px;
  border-color: #000000;
}
div.cell {
  position:relative;
  height: 1.4em;
}
.error {
  background-color: #eebbbb;
}
.normal {
  background-color: #eeffff;
}
span.value {
  position: absolute;
  top: 0px;
  left: 0px;
}
span.tooltip {
  position: absolute;
  display: none;
  border-style: solid;
  border-width:1px;
  border-color: #000000;
  background-color: #ffffe1;
  font-size:small;
  padding:0.2em;
  z-index:999;
  top: 4px;
  left: 4px;
}
</style>
</head>

<body>
<table>
<tr>
<td class="error"><div class="cell"><span class="value">エラーを含む値です</span><span class="tooltip">エラーだってよ</span></div></td>
<td class="error"><div class="cell"><span class="value">エラーを含む値っぽい</span><span class="tooltip">エラーだってさ</span></div></td>
<td class="normal"><div class="cell"><span class="value">ちょ、正常らしいぞ</span></div></td>
<td class="error"><div class="cell"><span class="value">エラーを含む値らしい</span><span class="tooltip">エラーらしいぜ</span></div></td>
</tr>
</table>

<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() {
    $("td.error").hover(function() {
      $(this).find("span.tooltip").show();
    }, function() {
      $(this).find("span.tooltip").hide();
    });
  });
</script>
</body>
</html>

キモは

CSS : positionの「absolute」「relative」「fixed」のリファレンス | CSS Lectureで知った


"position: relative;"の中の"position: absolute;"は外側起点の相対位置指定になること
とお約束のz-indexを使って通常表示とtooltipを重ねてるところですかね。

超重要参考文献

WEB+DB PRESS Vol.60

WEB+DB PRESS Vol.60

の「jQuery実践入門」です！

ちなみに第1特集の「プログラマが知るべき言語設計の基礎知識」は超大作なので読んでおいて損はないです。