마우스 오버시 레이어로 도움말 보이기

2가지 입니다.
첫번째는 타이틀 값을 받아서 내용을 보여 주는 것이고
두번째는 네이버에 있는 소스입니다.
계속 반복되는 것이라면 네이버 소스가 좋을 것 같습니다.

<SCRIPT language=JavaScript>  
<!-- 
//------- 미리보기 관련 div 처리-----------
function setPreviewBox()
{ 
  preview.style.posLeft = event.x + 10 + document.body.scrollLeft; 
  preview.style.posTop = event.y  + document.body.scrollTop-30;
} 

function showPreview(title)
{   
	if (title =="No1"){
		content = 'No1에 표시되는 내용 입니다.';
		}
	else if (title =="No2"){
		content = 'No2에 표시되는 내용 입니다<br> No2에 표시되는 내용 입니다.';
		}
	else if (title =="No3"){
		content = 'No3에 표시되는 내용 입니다<br> No3에 표시되는 내용 입니다<br> No3에 표시되는 내용 입니다.';
		}
    var text; 
    text ='<table cellpadding="5" bgcolor="#ffffff" style="font-size:9pt;color:#005F8B;filter:alpha(opacity=90); border-width:1; border-color:#3291BD; border-style:solid;">'; 
    text += '<tr><td><b>' + title + '<br><br></b>' + content + '</td></tr></table>'; 
    preview.innerHTML=text; 
    preview.style.visibility='visible';   
}

function hidePreview()
{ 
  preview.innerHTML=''; 
  preview.style.visibility='hidden'; 
}


//-->
</SCRIPT>
<!-- 미리보기 관련 div 처리-->
<DIV id=preview style="BORDER-RIGHT: 1px; BORDER-TOP: 1px; Z-INDEX: 1; LEFT: 78px; VISIBILITY: hidden; BORDER-LEFT: 1px; WIDTH: 550px; BORDER-BOTTOM: 1px; POSITION: absolute; TOP: 165px; HEIGHT: 62px"></DIV>
<!-- 미리보기 관련 div 처리 끝-->
<br /><br /><br /><br /><br />
<a href="#" onmousemove=setPreviewBox(); onmouseover="showPreview('No1');return true;" onmouseout="hidePreview(); return true;">올려 보세요 No1</a>
<br />
<a href="#" onmousemove=setPreviewBox(); onmouseover="showPreview('No2');return true;" onmouseout="hidePreview(); return true;">올려 보세요 No2</a>
<br /><br />
<a href="#" onmousemove=setPreviewBox(); onmouseover="showPreview('No3');return true;" onmouseout="hidePreview(); return true;">올려 보세요 No3</a>

<br />
<hr />





<SCRIPT type=text/javascript>
function	document_write(s)
{
	document.write(s) ;
}

/******************************************************************************/
function	NXTT_Display (a)
{
	var	div = NXTT.div ;
	var	top, left, maxLeft ;

	if (a>1 && div.style.display=="none")
	{
		div.style.left = div.style.right = "" ;
		div.style.width = "" ;
		div.style.visibility = "hidden" ;
		div.style.display = "block" ;

		NXTT.width = div.scrollWidth ;
		if (NXTT.env.maxWidth && NXTT.env.maxWidth<NXTT.width)
		{
			div.style.width = NXTT.env.maxWidth ;
			if (div.firstChild) NXTT.width = Math.max(div.scrollWidth, div.firstChild.scrollWidth) ;
		}

		div.style.display = "none" ;
		div.style.visibility = "visible" ;
	}

	if (! NXTT.show) return ;

	maxLeft = document.body.scrollWidth-NXTT.env.padding[1]-NXTT.width ;
	left = NXTT.px + NXTT.env.offset[1] ;
	if (left > maxLeft)
		if (NXTT.px-NXTT.env.offset[3] >= NXTT.env.padding[3]+NXTT.width)
			left -= NXTT.width + NXTT.env.offset[1] + NXTT.env.offset[3] ;
		else	left = maxLeft ;

	if (NXTT.py+NXTT.env.offset[2]+div.scrollHeight > document.body.scrollTop+document.body.clientHeight)
	{
		if (left == maxLeft)
			if (NXTT.py-NXTT.env.offset[0]-div.clientHeight > document.body.scrollTop)
				top = NXTT.py - NXTT.env.offset[0] - div.clientHeight ;
			else	top = NXTT.py + NXTT.env.offset[2] ;
		else	top = document.body.scrollTop + document.body.clientHeight - div.clientHeight ;
	}
	else	top = NXTT.py + NXTT.env.offset[2] ;

	div.style.top = top, div.style.left = left ;
	if (a)	div.style.display = "" ;
}
function	NXTT_SetHTML (s)
{
	NXTT.div.innerHTML = "" + (NXTT.env.head?NXTT.env.head:"") + s + (NXTT.env.tail?NXTT.env.tail:"") ;
	NXTT.ready = true ;
	NXTT_Display(2) ;
}
function	NXTT_onload (e)
{
	if (! e) e = window.event ;
	if (NXTT.env.type=="url" && (e.currentTarget?e.currentTarget:e.srcElement).id==NXTT.env.frameId)
		NXTT_SetHTML(document.getElementById(NXTT.env.frameId).contentWindow.document.body.innerHTML) ;
}
function	NXTT_Load ()
{
	switch (NXTT.env.type)
	{
	case	"id.value":
		NXTT_SetHTML(document.getElementById(NXTT.id).value) ;
		break ;
	case	"id.html":
		NXTT_SetHTML(document.getElementById(NXTT.id).innerHTML) ;
		break ;
	case	"html":
		NXTT_SetHTML(NXTT.id) ;
		break ;
	case	"url":
		NXTT.ready = false ;
		var	si = document.getElementById(NXTT.env.frameId) ;
		if (si.attachEvent)
		{
			si.detachEvent("onload", NXTT_onload) ;
			si.attachEvent("onload", NXTT_onload) ;
		}
		else si.onload = NXTT_onload ;
		si.src = NXTT.id ;
		break ;
	}
}
function	NXTT_HideDisplay ()
{
	if (! NXTT.show) NXTT.div.style.display = "none" ;
}
function	NXTT_HideRequest ()
{
	NXTT.show = false ;
	if (NXTT.env.delay)	
		setTimeout("NXTT_HideDisplay()", NXTT.env.delay*1000) ;
	else	NXTT_HideDisplay() ;
}
function	NXTT_HideNow ()
{
	NXTT.show = false ;
	NXTT_HideDisplay() ;
}
function	NXTT_Move (e)
{
	if (! e) e = window.event ;
	NXTT.px = e.pageX ? e.pageX : document.body.scrollLeft+e.clientX-document.body.clientLeft ;
	NXTT.py = e.pageY ? e.pageY : document.body.scrollTop+e.clientY-document.body.clientTop-1 ;
	if (NXTT.ready) NXTT_Display(0) ;
}
function	NXTT_Show (e, o, env, id)
{
	if (! e) e = window.event ;
	var	UserAgent = navigator.userAgent ;
	var	AppVersion = (((navigator.appVersion.split('; '))[1].split(' '))[1]) ;
	if (UserAgent.indexOf("MSIE") >= 0 && AppVersion < 5) return ;

	NXTT.px = e.pageX ? e.pageX : document.body.scrollLeft+e.clientX-document.body.clientLeft ;
	NXTT.py = e.pageY ? e.pageY : document.body.scrollTop+e.clientY-document.body.clientTop-1 ;

	if (env==NXTT.env && id==NXTT.id)
	{
		NXTT.show = true ;
		if (NXTT.ready) NXTT_Display(1) ;
		return ;
	}

	if (! NXTT.div)
	{
		NXTT.div = document.createElement("div") ;
		NXTT.div.style.display = "none", NXTT.div.style.position = "absolute" ;
		NXTT.div.style.borderWidth = 0, NXTT.div.style.zIndex = env.zIndex ? env.zIndex : 1 ;
		if (document.body.firstChild.insertAdjacentElement)
			document.body.firstChild.insertAdjacentElement("BeforeBegin", NXTT.div) ;
		else	document.body.appendChild(NXTT.div) ;
	}
	else	NXTT_HideNow() ;

	NXTT.env = env, NXTT.id = id ;

	if (NXTT.env.mouseontooltip)
		NXTT.div.onmouseover = NXTT.div.onmousemove = function () { NXTT.show = true ; } ;
	else	NXTT.div.onmouseover = NXTT.div.onmousemove = function (e) { NXTT.show = true ; NXTT_Move(e) ; } ;
	NXTT.div.onmouseout = NXTT_HideRequest ;

	if (NXTT.env.followMouse) o.onmousemove = NXTT_Move ;
	o.onmouseout = NXTT_HideRequest ;

	NXTT.show = true ;
	NXTT_Load(id) ;
}
var	NXTT = { div:null, ready:false, show:false, env:0, id:null, px:0, py:0, width:0, Show:NXTT_Show, Hide:NXTT_HideNow } ;
</SCRIPT>
<SCRIPT type=text/javascript>
var nxtt_L_Tem1 = {
	type:"id.html", followMouse:true, mouseontooltip:false, delay:0.01, offset:[1,7,7,1], padding:[0,190,0,10], maxWidth:0,
	head:"<table cellspacing=0 cellpadding=0 border=0><tr><td width=411 bgcolor=#FFFBEE class=lyr_bdr style='border:1px solid #F2E8C7;'>",
	tail:"</td><td width=6 class=tran_ie_R nowrap></td></tr><tr><td height=6 class=tran_ie_B nowrap></td><td class=tran_ie_RB nowrap></td></tr></table>"
};
</SCRIPT>
<STYLE type=text/css>
.none {
	DISPLAY: none
}
.maxim_type {
	FONT-SIZE: 12px; COLOR: #cc3300; TEXT-DECORATION: none
}
.lyr_bdr {
	PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 6px; PADDING-TOP: 6px
}
.lyr_nsl {
	FLOAT: left
}
IMG.lyr_nsl {
	MARGIN: 0px 15px 0px 0px
}
.tran_ie_R {
	FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='./shadow_r.png')
}
.tran_ie_B {
	FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='./shadow_b.png')
}
.tran_ie_RB {
	FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='./shadow_rb.png')
}
</STYLE>
<A onmouseover="NXTT.Show(event,this,nxtt_L_Tem1,'L_ID_0001');" style="cursor:pointer">No1</a>
<SPAN style="DISPLAY: none">
	<DIV class=none id=L_ID_0001>No1의 내용</DIV>
</SPAN>
<br />
<br />
<A onmouseover="NXTT.Show(event,this,nxtt_L_Tem1,'L_ID_0002');" style="cursor:pointer">No2</a>
<SPAN style="DISPLAY: none">
	<DIV class=none id=L_ID_0002>No2의 내용<br />No2의 내용</DIV>
</SPAN>