业务场景：当鼠标移入某元素时，显示提示框进行介绍。当鼠标移除时，会自动消失。引入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 }js实现短暂提示框
原文地址：https://www.cnblogs.com/toly/p/8711460.html