业务场景:当鼠标移入某元素时,显示提示框进行介绍。当鼠标移除时,会自动消失。引入ToolTip.js和ToolTip.css
主方法:ToolTip.show(需要提示的元素id,随意不重复即可,要提示的html文本,宽(可不指定),高(可不指定));
ToolTip.show(obj,id,html,width,height);
效果如下:
1.显示文本:
3:显示网站
js代码:F:\Html5\Plugins\ToolTip\js\ToolTip.js
document.body.clientWidth) {
left = document.body.clientWidth / 2;
}
toolTip.style.left = left + "px";
toolTip.style.top = top + 20 + "px";
parent.onmouseleave = function (ev) {
setTimeout(function () { //延迟:
document.getElementById(childId).style.display = "none";//隐藏
},300);
}
} else {
//显示
document.getElementById(childId).style.display = "block";
}
},/**
* 调用入口
*/
ToolTip.show = function (parentId,height) {
var parent = document.getElementById(obj)
parent.onmouseenter = function (ev) {
ToolTip._showTip(parentId,height)
}
}
window.ToolTip = ToolTip;
})();//为防止污染,将方法写在匿名函数中
HTML代码:F:\Html5\Plugins\ToolTip\ToolTip.html