[밑에 소스가 너무 지저분해서 수정] - 마우스를 따라다니지는 않는다.
/* tooltip 스타일 잡아주고 */
a.tooltip{position:relative; z-index:24; text-decoration:none; text-overflow:ellipsis; overflow:hidden}
a.tooltip:hover{z-index:25;}
a.tooltip span{display: none}
a.tooltip:hover span{display:block; z-index:26; position:absolute;top:1em; left:1em; min-width:250px; padding:5px; border:solid 1px #767676; background:#e5e6f1 url('../images/bg_tolltip.gif') top left repeat-x; font-size:11px;}
.tooltiparea a.tooltip span {width:500px;z-index:10000; }
$(document).ready(function() {
$("tr:gt(2) td.tooltiparea a").removeClass("tooltip"); //3번 째 행부터 적용
$("tr:gt(2) td.tooltiparea a").addClass("tooltipB"); //3번 째 행부터 적용
});
/* 내용은 심플하게 */
<a href="javascript:;" class="tooltip">${resultList.title}<span>내용</span></a>
=================================================================================================================
[예전 소스]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="javascript">
<!--
function showTipText(text,bg,width)
{
tooltip.innerText = text;
tooltip.style.background = bg;
tooltip.style.display = "inline";
tooltip.style.width = width;
}
function showTipHtml(tag,bg,width)
{
tooltip.innerHTML = tag;
tooltip.style.background = bg;
tooltip.style.display = "inline";
tooltip.style.width = width;
}
function hideTip()
{
tooltip.style.display = "none";
}
function moveTip()
{
tooltip.style.pixelTop = event.y + document.body.scrollTop + 5;
tooltip.style.pixelLeft = event.x + document.body.scrollLeft;
}
document.onmousemove = moveTip;
//사용할때는
//onmouseover="showTipHtml('내용','#ffffff',300);"
//onmouseout="hideTip();"
//html태그가 아닌 단순 텍스트만 사용한다면.
//onmouseover="showTipText('내용','#ffffff',300);" 사용
-->
</script>
<style>
#tooltip{visibility:visible;position:absolute;top:5;left:5;border:solid 1 #777777;background:#ffffff;color:#555555;font-size:9pt;font-family:verdana;padding:7;overflow:hidden; z-index:99999;display:none; }
</style>
</HEAD>
<BODY>
<table width="500" height="500" border="1">
<tr>
<Td align="center"><a onmouseover="javascript:showTipHtml('내용','#ffffff',300);" onmousemove="javascript:moveTip();" onmouseout="javascript:hideTip();">aaa</a></td>
</tR>
</table>
<div id='tooltip'></div>
</BODY>
</HTML>
내용 조회 시 줄 바꿈이 돼버려서 스크립트 에러나니까 쿼리에서 REPLACE(C.CNTNT, CHR(13)||CHR(10), '<BR/>') 요렇게..
할 때마다 까먹어서...ㅡ.ㅡ;;
'Carpe Programming > javascript' 카테고리의 다른 글
| [jQuery] tablesorter (1) | 2012.03.19 |
|---|---|
| [javascript ]세로 스크롤 제거 (0) | 2011.11.23 |
| [HTML5 & Javascript & jQuery] Tip & Tech 강좌 모음 (0) | 2011.11.03 |
| 전화번호 유효성 체크 (0) | 2011.10.18 |
| 사업자등록번호 유효성 체크 (0) | 2011.10.18 |