业务场景：当鼠标移入某元素时，显示提示框进行介绍。当鼠标移除时，会自动消失。引入ToolTip.js和ToolTip.css
主方法：ToolTip.show（需要提示的元素id, 随意不重复即可, 要提示的html文本, 宽（可不指定）, 高（可不指定））;
ToolTip.show（obj, id, html, width, height）;
效果如下：显示文本：
3:显示网站
js代码：F:\Html5\Plugins\ToolTip\js\ToolTip.js
1 (function () { 2 var ToolTip = {}; 3 /** 4 * 显示函数 5 */ 6 ToolTip._showTip = function (parentId, childId, html, width, height) { 7 8 var parent = document.getElementById(parentId)//要提示的元素 9 var child = document.getElementById(childId); 10 11 if (child === null) {//创建 12 var toolTip = document.createElement("div"); 13 toolTip.classList = "ui-tooltip-box"; 14 toolTip.id = childId; 15 toolTip.innerHTML = html; 16 17 parent.appendChild(toolTip); 18 19 toolTip.style.width = width ? width + "px" : "auto" 20 toolTip.style.height = height ? height + "px" : "auto" 21 22 //定位： 23 toolTip.style.position = "absolute"; 24 toolTip.style.display = "block"; 25 26 var left = parent.offsetLeft; 27 var top = parent.offsetTop; 28 29 if (left + toolTip.offsetWidth > document.body.clientWidth) { 30 left = document.body.clientWidth / 2; 31 } 32 33 toolTip.style.left = left + "px"; 34 toolTip.style.top = top + 20 + "px"; 35 36 parent.onmouseleave = function (ev) { 37 setTimeout(function () { //延迟： 38 document.getElementById(childId).style.display = "none";//隐藏 39 }, 300); 40 } 41 42 } else { 43 //显示 44 document.getElementById(childId).style.display = "block"; 45 46 } 47 48 49 }, 50 /** 51 * 调用入口 52 */ 53 ToolTip.show = function (parentId, childId, html, width, height) { 54 var parent = document.getElementById(obj) 55 parent.onmouseenter = function (ev) { 56 ToolTip._showTip(parentId, childId, html, width, height) 57 } 58 } 59 60 window.ToolTip = ToolTip; 61 })();//为防止污染，将方法写在匿名函数中