这次给大家带来JS实现停留在界面提示框，JS实现停留在界面提示框的注意事项有哪些，下面就是实战案例，一起来看一下。
业务场景：当鼠标移入某元素时，显示提示框进行介绍。当鼠标移除时，会自动消失。引入ToolTip.js和ToolTip.css
主方法：ToolTip.show（需要提示的元素id, 随意不重复即可, 要提示的html文本, 宽（可不指定）, 高（可不指定））;
ToolTip.show（obj, id, html, width, height）;
效果如下：
1.显示文本：
2:显示图片
3:显示网站
js代码：F:Html5PluginsToolTipjsToolTip.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:Html5PluginsToolTipToolTip.html
提示框 //调用方式 ToolTip.show("tooltip-text", "01", "唐诗泛指创作于唐朝的诗" + "。唐诗是中华民族最珍贵的文化遗产之一，是" + "中华文化宝库中的一颗明珠，" + "同时也对世界上许多民族和国家的文化发展产生了很大影响，" + "对于后人研究唐代的政治、民情、风俗、" + "文化等都有重要的参考意义和价值。",300,90); ToolTip.show("tooltip-photo", "02", "
",150,80); var html='' ToolTip.show("tooltip-poem", "03", html);
登录后复制
css代码：F:Html5PluginsToolTipToolTip.css
body { font-size: 14px; line-height: 1.8; background-image: url("https://www.php.cn/faq/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实现停留在界面提示框的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2765693.html
