리자

간단한 풍선도움말

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


<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개

현재 /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-09-25 조회 2,749
10-09-19 조회 2,790
10-09-15 조회 2,798
10-09-15 조회 4,200
10-09-15 조회 3,436
10-09-15 조회 2,531
10-09-07 조회 3,650
10-08-27 조회 4,101
10-06-11 조회 4,287
10-05-31 조회 2,536
10-02-27 조회 5,047
10-02-09 조회 3,791
09-10-10 조회 7,383
09-03-19 조회 3,238
09-02-09 조회 3,510
09-02-09 조회 4,559
08-11-01 조회 2,946
08-09-29 조회 4,598
08-09-26 조회 3,533
08-09-26 조회 3,608
08-09-26 조회 2,743
08-09-26 조회 3,787
08-09-26 조회 3,514
08-09-26 조회 4,282
08-09-18 조회 3,629
08-09-09 조회 3,259
08-08-28 조회 2,801
08-07-06 조회 3,568
08-05-21 조회 4,732
08-05-13 조회 4,577
08-04-17 조회 4,946
08-02-19 조회 3,564
08-01-18 조회 3,885
08-01-10 조회 3,852
07-10-22 조회 3,686
07-10-09 조회 4,347
07-10-03 조회 3,554
07-07-06 조회 4,236
07-07-06 조회 4,452
07-07-06 조회 4,067
07-06-28 조회 3,598
07-06-05 조회 3,610
07-06-05 조회 4,152
07-05-30 조회 3,324
07-05-02 조회 3,701
07-04-15 조회 5,188
07-04-11 조회 3,662
07-04-05 조회 3,971
07-03-31 조회 3,179
07-03-31 조회 4,153
07-03-30 조회 3,767
07-03-24 조회 4,024
07-03-22 조회 3,684
07-03-12 조회 4,438
07-02-16 조회 3,307
07-02-14 조회 5,194
07-02-10 조회 4,035
07-02-09 조회 4,416
07-01-19 조회 4,082
07-01-16 조회 5,013
06-12-16 조회 5,882
06-11-30 조회 3,634
06-11-25 조회 3,746
06-10-15 조회 5,102
06-09-26 조회 5,342
06-09-26 조회 5,457
06-09-22 조회 4,315
06-09-21 조회 3,567
06-09-21 조회 3,666
06-09-02 조회 3,508
06-08-08 조회 5,143
06-07-20 조회 3,769
06-07-17 조회 3,396
06-07-13 조회 4,217
06-07-11 조회 3,510
06-07-11 조회 3,510
06-07-11 조회 3,873
06-06-29 조회 6,105
06-06-19 조회 6,489
06-06-02 조회 3,543
06-05-24 조회 5,024
06-05-14 조회 7,813
06-05-08 조회 3,934
06-02-02 조회 5,483
05-12-16 조회 4,555
05-12-05 조회 5,188
05-06-28 조회 4,151
05-04-11 조회 4,104
05-04-11 조회 4,279
05-04-11 조회 3,346
05-03-13 조회 3,256
05-03-12 조회 4,319
04-12-08 조회 7,810
04-12-01 조회 5,219
04-11-28 조회 3,391
04-11-28 조회 3,233
04-08-05 조회 5,654
04-08-05 조회 5,002
04-08-05 조회 5,609