業務場景：當鼠標移入某元素時，顯示提示框進行介紹。當鼠標移除時，會自動消失。引入ToolTip.js和ToolTip.css
主方法：ToolTip.show（需要提示的元素id, 隨意不重復即可, 要提示的html文本, 寬（可不指定）, 高（可不指定））;
ToolTip.show（obj, id, html, width, height）;
效果如下：
1.顯示文本：
2:顯示圖片
3:顯示網站
js代碼：F:/Html5/Plugins/ToolTip/js/ToolTip.js
(function () { var ToolTip = {}; /** * 顯示函數 */ ToolTip._showTip = function (parentId, childId, html, width, height) { var parent = document.getElementById(parentId)//要提示的元素 var child = document.getElementById(childId); if (child === null) {//創建 var toolTip = document.createElement("div"); toolTip.classList = "ui-tooltip-box"; toolTip.id = childId; toolTip.innerHTML = html; parent.appendChild(toolTip); toolTip.style.width = width ? width + "px" : "auto" toolTip.style.height = height ? height + "px" : "auto" //定位： toolTip.style.position = "absolute"; toolTip.style.display = "block"; var left = parent.offsetLeft; var top = parent.offsetTop; if (left + toolTip.offsetWidth > 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, childId, html, width, height) { var parent = document.getElementById(obj) parent.onmouseenter = function (ev) { ToolTip._showTip(parentId, childId, html, width, height) } } window.ToolTip = ToolTip;})();//為防止污染，將方法寫在匿名函數中html代碼：F:/Html5/Plugins/ToolTip/ToolTip.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>提示框</title> <link rel="stylesheet" type="text/css" href="ToolTip.css" rel="external nofollow" ></head><body><div class="ui-tooltip-demo"> <p><a class="ui-tooltip" id="tooltip-text">唐詩</a></p> <p><a class="ui-tooltip" id="tooltip-photo">背景圖片</a></p> <p><a class="ui-tooltip" id="tooltip-poem">Yi人詩社</a></p></div><script src="js/ToolTip.js"></script><script>//調用方式 ToolTip.show("tooltip-text", "01", "唐詩泛指創作于唐朝的詩" + "。唐詩是中華民族最珍貴的文化遺產之一，是" + "中華文化寶庫中的一顆明珠，" + "同時也對世界上許多民族和國家的文化發展產生了很大影響，" + "對于后人研究唐代的政治、民情、風俗、" + "文化等都有重要的參考意義和價值。",300,90); ToolTip.show("tooltip-photo", "02", "<img src=/"imgs/bg.jpg/" height=/"80px/">",150,80); var html='<iframe src="http://www.toly.top" width="480px" height="300px"/>' ToolTip.show("tooltip-poem", "03", html);</script></body></html>css代碼：F:/Html5/Plugins/ToolTip/ToolTip.css
body { font-size: 14px; line-height: 1.8; background-image: url("imgs/bg.jpg");}.ui-tooltip-demo { width: 500px; margin: 30px auto; padding: 20px 30px; background-color: rgba(100%, 100%, 100%, 0.4); border-radius: 10px; text-align: center; box-shadow: 2px 1px 0px 3px rgba(0, 0, 0, 0.2);}.ui-tooltip-demo .ui-tooltip { color: #03f; font-size: 18px; cursor: help;}.ui-tooltip-box { display: block; background: #fff; line-height: 1.6; border: 1px solid #6cf; color: #333; padding: 20px; font-size: 12px; border-radius: 5px; overflow: auto;}總結
以上所述是小編給大家介紹的JavaScript實現短暫提示框，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對VeVb武林網網站的支持！
新聞熱點
疑難解答
