業務場景：當滑鼠移入某元素時，顯示提示框進行介紹。當滑鼠移除時，會自動消失。引入ToolTip.js和ToolTip.css 主方法：ToolTip.show（需要提示的元素id, 隨意不重覆即可, 要提示的html文本, 寬（可不指定）, 高（可不指定））; ToolTip.show（obj, i ...
業務場景：當滑鼠移入某元素時，顯示提示框進行介紹。當滑鼠移除時，會自動消失。引入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 }
