Question

jtopo怎么实现tooltip效果

Answer 1

//在鼠标显示一个层，该层的内容为div1的内容
function showTip(e,content,ifhave){
//if(!e) e = window.event;
//alert(e);
if(ifhave==null || ifhave=='0')return;
//var div1 = document.getElementById('divdisplay'); //将要弹出的层
//div1.innerHTML="备注："+content;
var div1 = document.getElementById(content); //将要弹出的层
var x,x1;
var y,y1;
if(window.event){
e = window.event;
x=(e.clientX+document.body.scrollLeft+10); //鼠标目前在X轴上的位置，加10是为了向右边移动10个px方便看到内容
y=(e.clientY+document.body.scrollTop+6);
//if((x+400)>document.body.clientWidth){x=x-400;}
if((y+150)>document.body.clientHeight){y=y-150-6;}
}else{
x=(e.pageX+10); //鼠标目前在X轴上的位置，加10是为了向右边移动10个px方便看到内容
y=(e.pageY+6);
//if((x+400)>document.body.clientWidth){x=x-400;}
if((y+150)>document.body.clientHeight){y=y-150-6;}
}
div1.style.left=x+"px"; //鼠标目前在X轴上的位置，加10是为了向右边移动10个px方便看到内容
div1.style.top=y+"px";
div1.style.display="block"; //div1初始状态是不可见的，设置可为可见
//window.event代表事件状态，如事件发生的元素，键盘状态，鼠标位置和鼠标按钮状.
//clientX是鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。
div1.style.position="absolute"; //必须指定这个属性，否则div1层无法跟着鼠标动
}

//关闭层div1的显示
function closeTip(event,divid)
{
//var div1 = document.getElementById('divdisplay');
//div1.style.display="none";
document.getElementById(divid).style.display="none";
}