<!-- 툴팁용 헤드소스 -->
<SCRIPT language=JavaScript>
<!--
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
if ( (ns4) || (ie4) ) {
document.onmousemove = mouseMove
if (ns4) document.captureEvents(Event.MOUSEMOVE)
}
function mouseMove(e) {
if (ns4 && document.layers["tooltip"].visibility=="hide") {
document.layers["tooltip"].pageX = e.pageX;
document.layers["tooltip"].pageY = e.pageY
}
}
function show(val) {
if (ie4) {
document.all["tooltip"].innerText=val;
document.all["tooltip"].style.pixelLeft = event.clientX + document.body.scrollLeft;
document.all["tooltip"].style.pixelTop = event.clientY + document.body.scrollTop + 10;
document.all["tooltip"].style.display = '';
} else {
val = '<table border=1 cellpadding=0 cellspacing=0><tr><td><font face=돋움>' + val + '</font></td></tr></table>'
document.layers["tooltip"].document.open();
document.layers["tooltip"].document.write(val);
document.layers["tooltip"].document.close();
document.layers["tooltip"].visibility = "show";
}
}
function hide() {
if (navigator.appName != 'Netscape' || document.layers == null) {
document.all["tooltip"].style.display = 'none';
} else {
document.layers["tooltip"].visibility = "hide";
}
}

//-->
</SCRIPT>
<!-- 툴팁용 헤드소스끝 -->

이상의 내용은 헤드부분에..

<!-- 툴팁스크립트 -->
<DIV id=tooltip style="BACKGROUND: #ffffff; BORDER-BOTTOM: 1px dashed; PADDING-TOP: 2px; PADDING-LEFT: 2px; PADDING-RIGHT: 2px; BORDER-LEFT: 1px dashed; BORDER-RIGHT: 1px dashed; BORDER-TOP: 1px dashed; COLOR: #B83E2C; DISPLAY: none; FONT-FACE:verdana; FONT-SIZE: 12px; POSITION: absolute; TEXT-DECORATION: none"></DIV>
<!-- 툴팁스크립트 끝 -->

이 내용은 바디안의 아무곳에나 넣고요..


<a onmouseout=hide();
onmouseover="show('툴팁으로 나타내고싶은내용');"><a href="링크주소">메뉴이름</a>

이 부분을 각 메뉴버튼에 포함시켜서 넣으면 됩니다.

툴팁의 모양을 변경하고 싶으시면 두번째에 있는 div 테그안의 소스를 고쳐주시면 되구요

실제 사용페이지는 http://www.stitchweb.net/chindex.htm입니다.
소스보기를 열어두었으니 한번 열어서 분석해보세요.
여러가지 소스들이 섞여 있으니.. 다른것도 응용해보시면 되겠네요.
이 스크립트는 레이어를 이용해서 툴팁을 띄우는 거랍니다.