리자

간단한 풍선도움말

· 2008-11-19 (수) 11:03:01 · 4183 · 3

책에 나온거 응용해 보았습니다.


<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script src="scripts/jquery.js"></script>
<style>
.tooltip {
  position: absolute;
  z-index: 2;
  background: #efd;
  border: 1px solid #ccc;
  padding: 3px;
}
</style>
</HEAD>

<BODY>

<span id='mover' tip='툴팁입니다.'>마우스오버</span>


<script>
$(document).ready(function() {
  var highlighted = "";
  var column = 3;

  var positionTooltip = function(event) {
    var tPosX = event.pageX;
    var tPosY = event.pageY+20;
    $('div.tooltip').css({top: tPosY, left: tPosX});
  };

  var showTooltip = function(event) {
    $('div.tooltip').remove();
    $('<div class="tooltip">' + $(this).attr('tip') + '</div>').appendTo('body');
    positionTooltip(event);
  };

  var hideTooltip = function() {
    $('div.tooltip').remove();
  };

  $('#mover')
  .hover(showTooltip, hideTooltip)
  .mousemove(positionTooltip);
});
</script>

</BODY>
</HTML>

[이 게시물은 관리자님에 의해 2011-10-31 16:55:28 jQuery에서 이동 됨]
|

댓글 3개

2008-11-19 (수) 11:57:42
현재 /adm/에서 사용하는 help

<?=help("목록 한페이지당 라인수")?>

/adm/admin.lib.php에서...

function help($help="", $left=0, $top=0)
{
global $g4;
static $idx = 0;

$idx++;

$help = preg_replace("/\n/", "<br>", $help);

$str = "<img src='$g4[admin_path]/img/icon_help.gif' border=0 width=15 height=15 align=absmiddle onclick=\"help('help$idx', $left, $top);\" style='cursor:hand;'>";
//$str .= "<div id='help$idx' style='position:absolute; top:0px; left:0px; display:none;'>";
$str .= "<div id='help$idx' style='position:absolute; display:none;'>";
$str .= "<div id='csshelp1'><div id='csshelp2'><div id='csshelp3'>$help</div></div></div>";
$str .= "</div>";

return $str;
}

style 부분은 style.css에 넣겠지만,
$('#mover') 같은 부분을 범용화 하는거는 간단하지만 꽤 어렵네요. ㅠ..ㅠ...

시간될 때 플러그인을 한번 봐야겠어요. 코딩 스탈이 어떻게 된 것인지
좋은소스 감사드립니다.^^
감사합니다.
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
+
제목 글쓴이 날짜 조회
10-05-31 조회 2,896
10-04-17 조회 4,693
10-03-23 조회 5,845
10-02-26 조회 3,363
10-02-23 조회 3,327
10-02-11 조회 3,945
10-02-09 조회 3,011
10-01-26 조회 3,466
10-01-23 조회 6,794
10-01-19 조회 3,501
10-01-13 조회 3,701
09-12-06 조회 4,636
09-11-24 조회 4,186
09-11-19 조회 3,062
09-11-11 조회 3,659
09-08-30 조회 3,139
09-08-12 조회 3,141
09-07-21 조회 3,320
09-07-19 조회 3,202
09-07-11 조회 3,117
09-06-15 조회 2,897
09-05-29 조회 3,072
09-05-28 조회 3,501
09-05-05 조회 3,360
09-04-07 조회 3,571
09-02-23 조회 4,368
09-02-17 조회 3,111
09-02-17 조회 2,491
09-02-09 조회 2,599
09-01-23 조회 3,401
09-01-17 조회 4,228
09-01-08 조회 3,178
08-11-07 조회 4,434
08-11-01 조회 4,925
08-10-30 조회 3,521
08-10-16 조회 3,435
08-10-02 조회 2,574
08-09-22 조회 3,921
08-09-22 조회 2,894
08-09-20 조회 5,390
08-09-20 조회 4,449
08-09-20 조회 3,524
08-09-20 조회 2,900
08-09-20 조회 3,095
08-09-20 조회 4,076
08-09-20 조회 3,566
08-09-20 조회 3,152
08-09-18 조회 3,400
08-09-06 조회 3,002
08-09-06 조회 2,749
08-09-05 조회 3,404
08-09-05 조회 5,613
08-09-03 조회 4,421
08-09-03 조회 2,676
08-07-31 조회 3,154
08-07-18 조회 3,757
08-06-19 조회 3,103
08-06-15 조회 3,093
08-06-14 조회 3,545
08-05-23 조회 2,783
08-05-13 조회 2,692
08-04-22 조회 4,364
08-04-22 조회 5,068
08-04-22 조회 6,809
08-04-17 조회 2,986
08-04-17 조회 3,566
08-04-17 조회 3,670
08-04-17 조회 5,909
08-04-17 조회 3,105
08-04-17 조회 3,433
08-04-06 조회 3,522
08-04-05 조회 3,104
08-04-04 조회 7,163
08-04-04 조회 4,452
08-04-04 조회 3,804
08-04-04 조회 3,982
08-04-04 조회 2,862
08-04-04 조회 2,647
08-04-04 조회 2,687
08-04-04 조회 2,885
08-04-04 조회 2,640
08-04-04 조회 2,607
08-04-04 조회 4,122
08-04-03 조회 2,645
08-04-03 조회 3,852
08-04-02 조회 3,067
08-04-02 조회 2,819
08-03-25 조회 3,678
08-03-11 조회 3,440
08-03-11 조회 2,949
08-03-11 조회 2,905
08-03-11 조회 2,703
08-03-11 조회 2,480
08-03-11 조회 2,285
08-03-11 조회 2,343
08-03-07 조회 2,878
08-03-05 조회 2,620
08-02-27 조회 2,850
08-02-21 조회 2,731
08-02-21 조회 3,305