리자

간단한 풍선도움말

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


<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건
+
제목 글쓴이 날짜 조회
11-10-25 조회 2,483
11-10-18 조회 4,013
11-10-18 조회 2,391
11-10-15 조회 3,612
11-10-10 조회 2,665
11-10-02 조회 2,581
11-09-28 조회 2,396
11-09-24 조회 2,481
11-09-22 조회 2,381
11-09-05 조회 2,868
11-08-31 조회 2,243
11-08-31 조회 2,550
11-08-31 조회 2,406
11-08-29 조회 2,958
11-08-28 조회 2,451
11-08-25 조회 2,504
11-08-17 조회 2,217
11-08-16 조회 2,454
11-08-11 조회 2,905
11-08-07 조회 2,617
11-08-03 조회 2,327
11-07-22 조회 2,079
11-07-12 조회 3,299
11-06-27 조회 2,079
11-06-01 조회 1,745
11-05-17 조회 2,534
11-05-01 조회 2,603
11-04-28 조회 2,891
11-04-28 조회 2,938
11-04-13 조회 2,596
11-03-27 조회 2,719
11-03-27 조회 2,599
11-03-14 조회 2,012
11-03-02 조회 2,334
11-03-02 조회 2,566
11-02-27 조회 2,995
11-02-23 조회 2,375
11-02-19 조회 2,515
11-02-14 조회 4,132
11-02-03 조회 2,922
11-01-24 조회 3,864
11-01-04 조회 2,397
10-12-08 조회 5,404
10-11-15 조회 2,407
10-11-14 조회 2,586
10-11-14 조회 3,610
10-10-29 조회 3,681
10-10-19 조회 2,694
10-10-07 조회 2,522
10-10-05 조회 4,438
10-09-18 조회 2,738
10-09-18 조회 2,477
10-09-17 조회 4,879
10-09-15 조회 2,823
10-09-15 조회 2,347
10-09-15 조회 2,837
10-09-15 조회 2,670
10-09-11 조회 3,993
10-09-11 조회 2,500
10-09-11 조회 2,539
10-09-07 조회 3,814
10-09-07 조회 3,350
10-08-29 조회 2,806
10-07-01 조회 3,060
10-06-30 조회 2,461
10-06-30 조회 2,648
10-06-30 조회 2,997
10-06-13 조회 2,032
10-04-15 조회 3,203
10-04-04 조회 3,433
10-02-23 조회 3,530
10-02-09 조회 3,135
10-01-25 조회 2,639
10-01-25 조회 2,736
09-12-27 조회 4,386
09-11-23 조회 3,610
09-11-20 조회 4,843
09-08-30 조회 3,045
09-08-30 조회 3,039
09-08-12 조회 3,006
09-07-22 조회 4,062
09-07-22 조회 4,714
09-07-15 조회 5,885
09-07-11 조회 2,959
09-06-17 조회 2,699
09-06-15 조회 2,988
09-05-29 조회 3,267
09-05-11 조회 5,906
09-05-08 조회 2,657
09-04-30 조회 3,777
09-04-17 조회 3,094
09-04-04 조회 3,272
09-03-05 조회 3,663
09-02-09 조회 3,630
09-02-03 조회 6,138
08-12-27 조회 3,200
08-12-20 조회 4,291
08-11-21 조회 5,249
08-11-14 조회 2,819
08-11-03 조회 3,278