[Jquery]따라다니는 설명창

<script>
$(document).ready(function (){
 init_detailBox();
});

function init_detailBox() {

 // 요소가 존재하는가?
 if (!$('.detailBox').length) {

  // 존재하지 않는다면, 함수를 빠져나간다.
  return;
 }

 // 툴팁을 추가한다.(숨김 상태)
 $('body').append('<div id="detailBox_outer"><div id="detailBox_inner"></div></div>');

 // 빈 변수를 선언한다.
 var $tt_title, $tt_alt;

 var $tt = $('#detailBox_outer');
 var $tt_i = $('#detailBox_inner');

 // 마우스 호버(hover)에 대한 함수를 작성한다.
 $('.detailBox').hover(function() {

  // title 정보를 변수에 저장한 후, title 정보를 제거한다.
  if ($(this).attr('title')) {
   $tt_title = $(this).attr('title');
   $(this).attr('title', '');
  }

  // alt 정보를 변수에 저장한 후, alt 정보를 제거한다.
  if ($(this).attr('alt')) {
   $tt_alt = $(this).attr('alt');
   $(this).attr('alt', '');
  }

  // 텍스트를 추가한다.
  $tt_i.html($tt_title);

  // 툴팁을 보이게 한다.
  $tt.show();
 },
 function() {

  // 툴팁을 숨긴다.
  $tt.hide();

  // 빈 텍스트를 추가한다.
  $tt_i.html('');

  // title 정보를 만든다.
  if ($tt_title) {
   $(this).attr('title', $tt_title);
  }

  // alt 정보를 만든다.
  if ($tt_alt) {
   $(this).attr('alt', $tt_alt);
  }

 // 이동에 대한 함수를 작성한다.
 }).mousemove(function(ev) {

  // 이벤트 좌표
  var $ev_x = ev.pageX;
  var $ev_y = ev.pageY;

  // 툴팁 좌표
  var $tt_x = $tt.outerWidth();
  var $tt_y = $tt.outerHeight();

  // 본문 좌표
  var $bd_x = $('body').outerWidth();
  var $bd_y = $('body').outerHeight();

  // 툴팁을 이동시킨다.
  $tt.css({
   'top': $ev_y + $tt_y > $bd_y ? $ev_y - $tt_y : $ev_y,
   'left': $ev_x + $tt_x + 20 > $bd_x ? $ev_x - $tt_x - 10 : $ev_x + 15
  });
 });
}
</script>

 

 

 

 

<CSS>

/**************************************** detail Box ***********************************************/
.detailBox {
 cursor: default;
}

a.detailBox {
 cursor: pointer;
}

#detailBox_outer,#detailBox_inner {
 border: 1px solid;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
}

#detailBox_outer {
 background: #fff;
 border-color: #666;
 display: none;
 font-size: 10px;
 padding: 1px;
 position: absolute;
 left: -9999px;
 width: 200px;
 z-index: 9999;
}

#detailBox_inner {
 background: #f9f9f9;
 border-color: #ccc;
 padding: 10px;
}