业务场景：当鼠标移入某元素时，显示提示框进行介绍。当鼠标移除时，会自动消失。引入ToolTip.js和ToolTip.css
主方法：ToolTip.show（需要提示的元素id, 随意不重复即可, 要提示的html文本, 宽（可不指定）, 高（可不指定））;
- ToolTip.show（obj, id, html, width, height）;
效果如下：
- 显示文本：
2:显示图片
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 })();//为防止污染，将方法写在匿名函数中
- html代码：F:\Html5\Plugins\ToolTip\ToolTip.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>提示框</title> 6 <link rel="stylesheet" type="text/css" href="ToolTip.css"> 7 </head> 8 <body> 9 <div class="ui-tooltip-demo"> 10 <p><a class="ui-tooltip" id="tooltip-text">唐诗</a></p> 11 <p><a class="ui-tooltip" id="tooltip-photo">背景图片</a></p> 12 <p><a class="ui-tooltip" id="tooltip-poem">Yi人诗社</a></p> 13 14 </div> 15 <script src="js/ToolTip.js"></script> 16 <script> 17 //调用方式 18 ToolTip.show("tooltip-text", "01", "唐诗泛指创作于唐朝的诗" + 19 "。唐诗是中华民族最珍贵的文化遗产之一，是" + 20 "中华文化宝库中的一颗明珠，" + 21 "同时也对世界上许多民族和国家的文化发展产生了很大影响，" + 22 "对于后人研究唐代的政治、民情、风俗、" + 23 "文化等都有重要的参考意义和价值。",300,90); 24 25 ToolTip.show("tooltip-photo", "02", "<img src=\"imgs/bg.jpg\" height=\"80px\">",150,80); 26 27 var html=‘<iframe src="http://www.toly.top" width="480px" height="300px"/>‘ 28 ToolTip.show("tooltip-poem", "03", html); 29 30 </script> 31 </body> 32 </html>
- css代码：F:\Html5\Plugins\ToolTip\ToolTip.css
1 body { 2 font-size: 14px; 3 line-height: 1.8; 4 background-image: url("imgs/bg.jpg"); 5 6 } 7 8 .ui-tooltip-demo { 9 width: 500px; 10 margin: 30px auto; 11 padding: 20px 30px; 12 background-color: rgba(100%, 100%, 100%, 0.4); 13 border-radius: 10px; 14 text-align: center; 15 box-shadow: 2px 1px 0px 3px rgba(0, 0, 0, 0.2); 16 } 17 18 .ui-tooltip-demo .ui-tooltip { 19 color: #03f; 20 font-size: 18px; 21 cursor: help; 22 } 23 24 .ui-tooltip-box { 25 display: block; 26 background: #fff; 27 line-height: 1.6; 28 border: 1px solid #6cf; 29 color: #333; 30 padding: 20px; 31 font-size: 12px; 32 border-radius: 5px; 33 overflow: auto; 34 }
