js实现短暂提示框

Posted 2020-10-29 _张风捷特烈

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js实现短暂提示框相关的知识，希望对你有一定的参考价值。

业务场景：当鼠标移入某元素时，显示提示框进行介绍。当鼠标移除时，会自动消失。引入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实现短暂提示框的主要内容，如果未能解决你的问题，请参考以下文章