리자

간단한 풍선도움말

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


<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건
+
제목 글쓴이 날짜 조회
12-08-29 조회 4,164
12-08-07 조회 3,822
12-08-03 조회 3,643
12-07-31 조회 3,744
12-07-30 조회 3,698
12-07-16 조회 3,895
12-07-15 조회 3,729
12-07-07 조회 3,590
12-07-06 조회 3,799
12-07-03 조회 3,751
12-06-29 조회 3,363
12-06-22 조회 3,737
12-06-17 조회 3,995
12-05-21 조회 3,919
12-05-02 조회 3,445
12-05-02 조회 4,241
12-05-02 조회 3,362
12-04-30 조회 3,560
12-04-30 조회 3,239
12-03-17 조회 4,100
12-03-10 조회 3,436
12-03-08 조회 3,958
12-03-03 조회 3,675
12-02-27 조회 5,087
12-02-17 조회 4,385
12-02-16 조회 4,666
12-02-03 조회 3,333
12-01-31 조회 3,240
12-01-24 조회 3,239
12-01-17 조회 3,942
12-01-05 조회 3,486
11-12-30 조회 3,220
11-12-23 조회 4,775
11-12-08 조회 3,536
11-12-07 조회 4,503
11-11-27 조회 3,923
11-11-25 조회 4,252
11-11-23 조회 3,703
11-11-22 조회 3,558
11-11-09 조회 3,265
11-10-23 조회 3,205
11-10-19 조회 3,156
11-10-08 조회 2,842
11-10-04 조회 2,842
11-10-04 조회 5,302
11-09-01 조회 4,373
11-08-13 조회 2,559
11-08-06 조회 3,237
11-07-11 조회 3,635
11-06-27 조회 2,993
11-06-21 조회 2,656
11-06-13 조회 2,467
11-06-07 조회 2,477
11-05-26 조회 2,434
11-04-20 조회 2,759
11-03-21 조회 2,861
11-03-18 조회 2,553
11-03-11 조회 2,571
11-02-07 조회 2,401
11-01-18 조회 2,721
11-01-12 조회 2,442
11-01-06 조회 2,532
10-12-10 조회 2,797
10-12-09 조회 2,650
10-12-08 조회 5,080
10-11-29 조회 2,910
10-11-28 조회 2,821
10-11-28 조회 2,656
10-11-19 조회 2,846
10-11-04 조회 2,718
10-10-21 조회 2,443
10-10-19 조회 3,402
10-10-12 조회 2,729
10-10-07 조회 2,554
10-09-30 조회 3,516
10-09-17 조회 3,928
10-09-17 조회 3,872
10-05-31 조회 3,583
09-12-31 조회 3,714
09-07-23 조회 5,042
08-09-16 조회 3,245
08-09-06 조회 2,985
08-09-04 조회 3,408
08-08-16 조회 4,439
08-08-15 조회 3,307
08-08-14 조회 4,522
08-08-12 조회 3,992
08-07-23 조회 2,808
08-07-10 조회 3,758
08-07-04 조회 2,986
08-06-27 조회 7,627
08-06-19 조회 4,937
08-05-27 조회 5,540
08-05-25 조회 5,375
08-05-23 조회 3,449
08-05-23 조회 4,618
08-05-21 조회 4,968
08-05-20 조회 4,083
08-05-20 조회 3,310
08-04-18 조회 4,373