輕量級(jí) JS ToolTip提示效果
更新時(shí)間：2010年07月20日 01:04:22 作者：
JS ToolTip提示效果，喜歡的朋友可以參考下。
鼠標(biāo)經(jīng)過(guò)出現(xiàn)的提示效果，比title更漂亮，可訂制。
JS：
//---------------------------tooltip效果 start-----------------------------------
//獲取某個(gè)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、構(gòu)建新的html片段
*2、設(shè)置提示框新位置
*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調(diào)用：
<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")作用等價(jià)于document.getElementById("id")
AttachTip:function(){}, //添加提示綁定
DetachTip:function(){}, //移除提示綁定
這兩行，可以用動(dòng)態(tài)綁定事件完成，因?yàn)轫?xiàng)目里面用不著，所以暫時(shí)沒(méi)加
JS：
復(fù)制代碼 代碼如下:
//---------------------------tooltip效果 start-----------------------------------
//獲取某個(gè)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、構(gòu)建新的html片段
*2、設(shè)置提示框新位置
*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：
復(fù)制代碼 代碼如下:
#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調(diào)用：
復(fù)制代碼 代碼如下:
<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")作用等價(jià)于document.getElementById("id")
AttachTip:function(){}, //添加提示綁定
DetachTip:function(){}, //移除提示綁定
這兩行，可以用動(dòng)態(tài)綁定事件完成，因?yàn)轫?xiàng)目里面用不著，所以暫時(shí)沒(méi)加
相關(guān)文章
JavaScript鍵盤(pán)事件超詳細(xì)總結(jié)
這篇文章主要給大家介紹了關(guān)于JavaScript鍵盤(pán)事件的相關(guān)資料,鍵盤(pán)事件是指在網(wǎng)頁(yè)中當(dāng)用戶(hù)按下鍵盤(pán)上的按鍵時(shí)所觸發(fā)的事件,在JavaScript中可以通過(guò)監(jiān)聽(tīng)鍵盤(pán)事件來(lái)實(shí)現(xiàn)一些交互效果,需要的朋友可以參考下2023-10-10
解決bootstrap中modal遇到Esc鍵無(wú)法關(guān)閉頁(yè)面
Bootstrap，來(lái)自 Twitter，是目前最受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡(jiǎn)潔靈活，使得 Web 開(kāi)發(fā)更加快捷。不過(guò)在使用的過(guò)程中，我們還是會(huì)遇到各種小問(wèn)題，今天我們探討的就是個(gè)人在使用中遇到的一個(gè)小BUG的修復(fù)。2015-03-03
IE中g(shù)etElementsByName()對(duì)有些元素?zé)o效的解決方案
這篇文章主要介紹了IE中g(shù)etElementsByName()對(duì)有些元素?zé)o效的解決方案,很簡(jiǎn)單，很實(shí)用，需要的朋友可以參考下2014-09-09
這篇文章主要介紹了JavaScript閉包與作用域鏈,結(jié)合實(shí)例形式分析了javascript閉包的具體概念、功能、并對(duì)比作用域鏈分析了閉包的相關(guān)使用技巧與注意事項(xiàng),需要的朋友可以參考下
2019-01-01 
教你如何使用THREEJS實(shí)現(xiàn)一個(gè)可調(diào)節(jié)檔位、可搖頭的電風(fēng)扇
夏天到了，用Three.js實(shí)現(xiàn)一個(gè)可以搖頭和調(diào)節(jié)檔位的電風(fēng)扇，主要使用到Blender處理3D模型，用Vite+Typescript搭建項(xiàng)目框架，這篇文章主要介紹了使用THREEJS實(shí)現(xiàn)一個(gè)可調(diào)節(jié)檔位、可搖頭的電風(fēng)扇,需要的朋友可以參考下
2023-06-06 
css 二級(jí)菜單 實(shí)現(xiàn)代碼集合 修正版
最近的網(wǎng)站要求使用二級(jí)菜單，本著“能用別人的就用別人的，不能用別人的就用自己的”的原則，在網(wǎng)上找到一個(gè)經(jīng)典的使用CSS制作的二級(jí)菜單，感覺(jué)不錯(cuò)，先記錄下來(lái)，以備它用。
2009-06-06 
本人主要介紹了使用nodejs如何讀取memcache的示例程序，大家參考使用吧
2014-01-01 
Array.prototype.slice.apply的使用方法
arguments在JavaScript語(yǔ)法中是函數(shù)特有的一個(gè)對(duì)象屬性(Arguments對(duì)象)，用來(lái)引用調(diào)用該函數(shù)時(shí)傳遞的實(shí)際參數(shù)。
2010-03-03 
js實(shí)現(xiàn)一個(gè)簡(jiǎn)單的數(shù)字時(shí)鐘效果
本文主要介紹了js實(shí)現(xiàn)一個(gè)簡(jiǎn)單的數(shù)字時(shí)鐘效果的示例代碼。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-03-03