리자

간단한 풍선도움말

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


<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건
+
제목 글쓴이 날짜 조회
08-10-30 조회 2,699
08-10-30 조회 2,793
08-10-20 조회 2,526
08-10-11 조회 2,426
08-09-20 조회 4,174
08-09-20 조회 2,841
08-09-18 조회 2,717
08-09-18 조회 3,419
08-09-17 조회 3,286
08-09-05 조회 4,629
08-09-03 조회 2,754
08-08-18 조회 2,893
08-08-17 조회 2,630
08-08-13 조회 3,411
08-07-30 조회 3,469
08-07-28 조회 4,350
08-07-22 조회 5,582
08-07-22 조회 4,061
08-07-10 조회 3,033
08-07-08 조회 3,095
08-06-30 조회 3,855
08-06-30 조회 3,340
08-06-30 조회 3,656
08-06-14 조회 2,726
08-06-11 조회 7,089
08-06-05 조회 3,305
08-05-20 조회 4,821
08-05-13 조회 4,154
08-05-08 조회 3,107
08-05-08 조회 5,263
08-04-25 조회 4,061
08-04-22 조회 4,524
08-04-21 조회 3,167
08-04-17 조회 2,552
08-04-17 조회 2,949
08-04-17 조회 2,251
08-04-17 조회 5,218
08-04-17 조회 4,539
08-04-17 조회 4,529
08-04-17 조회 3,315
08-04-17 조회 3,141
08-04-17 조회 3,629
08-04-17 조회 4,992
08-04-17 조회 5,139
08-04-17 조회 3,346
08-04-04 조회 4,604
08-04-04 조회 2,828
08-04-04 조회 2,572
08-04-04 조회 2,805
08-04-04 조회 2,541
08-04-04 조회 2,775
08-04-03 조회 2,664
08-04-03 조회 2,732
08-04-02 조회 3,048
08-04-02 조회 3,199
08-03-31 조회 3,093
08-03-26 조회 4,268
08-03-11 조회 2,955
08-03-11 조회 2,366
08-03-11 조회 2,375
08-03-07 조회 4,208
08-03-07 조회 3,302
08-03-06 조회 4,756
08-03-04 조회 3,388
08-02-19 조회 3,782
08-02-03 조회 3,406
08-01-18 조회 3,989
08-01-15 조회 3,442
08-01-12 조회 4,290
08-01-12 조회 3,853
08-01-12 조회 3,804
07-12-24 조회 3,100
07-11-30 조회 3,935
07-11-08 조회 4,996
07-11-06 조회 3,853
07-10-26 조회 4,998
07-10-24 조회 4,186
07-10-22 조회 3,571
07-10-19 조회 4,752
07-10-09 조회 4,890
07-10-09 조회 6,754
07-10-05 조회 3,086
07-10-05 조회 4,020
07-10-03 조회 7,534
07-10-03 조회 3,579
07-10-03 조회 2,928
07-10-03 조회 2,853
07-09-28 조회 4,698
07-09-27 조회 3,765
07-09-27 조회 3,215
07-09-13 조회 3,360
07-08-28 조회 3,450
07-08-04 조회 4,833
07-08-01 조회 5,527
07-08-01 조회 4,937
07-07-30 조회 5,448
07-07-29 조회 3,599
07-07-21 조회 3,421
07-07-18 조회 5,379
07-07-16 조회 3,178