自定义tooltip

在datagrid中的某一个单元格设置tooltip，效果图如下：

1、导入css样式：<link rel="stylesheet" type="text/css" href="../themes/myTooltip.css">

myTooltip.css:

@CHARSET "UTF-8";
#tipPanel{ background:white; padding:0; width:600px;height: 158px; border:solid 1px #95B8E7; font-size:14px; color:#555;}
a{text-decoration: NONE;}
img{border: 0;}

导入js：<script type='text/javascript' src='/student/js/class/myTooltip.js'></script>

myTooltip.js：

var param11="";
//获取某个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(){
// 绑定页面单击事件，隐藏tooltip
$(document).bind("click", function(event){
displayTip(event);
});
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"; 
} 
}, 
ShowTip:function(oTarget,content,op,event){
param11=op;
if($("#tipPanel")==null)
return; 
//1. 构建新的html片段 
var tempStr=""; //html片段 
if(arguments.length>1){
tempStr="<iframe frameborder='0' scolling='auto' src='"+arguments[1]+"' style='width:100%;height:100%;' name='myIFrame'></iframe>";
}
document.getElementById("tipPanel").innerHTML=tempStr; 
//2. 设置提示框新位置 
var pos=GetPos(oTarget); 
$("#tipPanel").css("left",(oTarget.offsetWidth/2+pos.x)+"px"); 
$("#tipPanel").css("top",(oTarget.offsetHeight+pos.y)+"px");
// 给提示框添加事件 
$("#tipPanel").bind('mouseenter', function(){
$("#tipPanel").show();
}).bind('mouseleave', function(){
if (param11=="over") {
$("#tipPanel").hide();
}
});
//3. 显示提示框 
if (op=="over") {
setTimeout('delayShow()',0);
}else{
delayShow();
}
if (event.stopPropagation) {
event.stopPropagation(); 
} else if (window.event) { 
window.event.cancelBubble = true;
}
}, 
HideTip:function(){
if (param11=="over") {
if($("#tipPanel")==null) 
return; 
$("#tipPanel").hide();
}
} 
};
// 鼠标经过时延迟显示
function delayShow(){
if(param11!="close"){
$("#tipPanel").show();
}
}
function displayTip(event){
if (param11!="lock") {
// 当tooltip处于隐藏时，设置参数param11为close，避免鼠标在上面点击过后，又点击隐藏后，过2秒后还显示
param11="close";
$("#tipPanel").hide();
if (event.stopPropagation) { 
event.stopPropagation(); 
} else if (window.event) { 
window.event.cancelBubble = true;
}
}
}
// 给页面加解锁
function lockTip(){
var isLock=window.frames["myIFrame"].document.getElementById('lockImg').src;
if (isLock.indexOf("/unlock.png")>-1) {
param11="lock";
window.frames["myIFrame"].document.getElementById('lockImg').src="../image/lock.png";
$("#tooltip").hide();
$("#tooltipHidden").show();
$('#tipPanel').draggable({
disabled : false
});
}else{
param11="unlock";
window.frames["myIFrame"].document.getElementById('lockImg').src="../image/unlock.png"; 
$("#tooltipHidden").hide();
$("#tooltip").show();
$('#tipPanel').draggable({
disabled : true
});
}
}

2、页面初始化时：

$(function(){

// 初始化tooltip
ToolTip.Init();

});

3、在js中，设置datagrid时字段设置为：

{field:"roomname",title:"教室",width:80,align:"center",
formatter: function(value,row,index){
return "<a href='#' οnclick='ToolTip.ShowTip(this,\"historyClassroom.jsp?id="+row.id+"\",\"click\",event);'"+
"οnmοuseοver='ToolTip.ShowTip(this,\"historyClassroom.jsp?id="+row.id+"\",\"over\",event)' οnmοuseοut='ToolTip.HideTip();'>"+value+"</a>";
}
},