경량급 JS ToolTip 알림 효과

마우스 가 지나 간 알림 효 과 는 title 보다 더 아름 답 고 주문 제작 이 가능 합 니 다.JS:
 
//---------------------------tooltip start-----------------------------------
// html
function GetPos(obj){
var pos=new Object();
pos.x=obj.offsetLeft;
pos.y=obj.offsetTop;
while(obj=obj.offsetParent){
pos.x+=obj.offsetLeft;
pos.y+=obj.offsetTop;
}
return pos;
};

//
var ToolTip={
_tipPanel:null,
Init:function(){
if(null==this._tipPanel){
var tempDiv=document.createElement("div");
document.body.insertBefore(tempDiv, document.body.childNodes[0]);
tempDiv.id="tipPanel";
tempDiv.style.display="none";
tempDiv.style.position="absolute";
tempDiv.style.zIndex="999";
}
},
AttachTip:function(){}, //
DetachTip:function(){}, //
ShowTip:function(oTarget){
if($("tipPanel")==null)
return;

/*
*1、 html
*2、
*3、
*/
//1.
var tempStr=""; //html
if(arguments.length>1){
for(var i=1;i<arguments.length;i++){
tempStr+="<p>"+arguments[i]+"</p>";
}
}
$("tipPanel").innerHTML=tempStr;
//2.
var pos=GetPos(oTarget);
$("tipPanel").style.left=(oTarget.offsetWidth/2+pos.x)+"px";
$("tipPanel").style.top=(oTarget.offsetHeight+pos.y)+"px";
//3.
$("tipPanel").style.display="";
},
HideTip:function(){
if($("tipPanel")==null)
return;
$("tipPanel").style.display="none";
}
};

//---------------------------tooltip end-----------------------------------
CSS:
 
#tipPanel{ background:white; padding:6px 8px; width:300px; border:solid 4px #09c; font-size:14px; color:#555;}
#tipPanel p{ margin:0px;}
#tipPanel b{ color:red; font-size:14px;}
HTML 호출:
 
<body>
<input type="button" value="hover me" onmouseover='ToolTip.ShowTip(this,"<b> :</b>2010-7-19");' onmouseout='ToolTip.HideTip();' style="margin:200px 100px;" />
</body>
<script type="text/javascript">
//initialize tooltip control
ToolTip.Init();
</script>

사용 효과:위의$("id")작용 은 document.getElement ById("id")AttachTip:function(){},/알림 바 인 딩 추가 DetachTip:function(){},//알림 바 인 딩 제거 이 두 줄 은 동적 바 인 딩 이벤트 로 완료 할 수 있 습 니 다.프로젝트 에 필요 하지 않 기 때문에 잠시 추가 하지 않 았 습 니 다.

좋은 웹페이지 즐겨찾기