这次给大家带来js实现停留在界面提示框，js实现停留在界面提示框的注意事项有哪些，下面就是实战案例，一起来看一下。
业务场景：当鼠标移入某元素时，显示提示框进行介绍。当鼠标移除时，会自动消失。引入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(p);   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> <p 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> </p> <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; }
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
vue todo-list组件上传npm
js操作dom插入节点
以上就是js实现停留在界面提示框的详细内容。