JavaScript实现短暂提示框功能

前端之家收集整理的这篇文章主要介绍了JavaScript实现短暂提示框功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

业务场景:当鼠标移入某元素时,显示提示框进行介绍。当鼠标移除时,会自动消失。引入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

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,height) { var parent = document.getElementById(obj) parent.onmouseenter = function (ev) { ToolTip._showTip(parentId,height) } } window.ToolTip = ToolTip; })();//为防止污染,将方法写在匿名函数

HTML代码:F:\Html5\Plugins\ToolTip\ToolTip.html

css代码:F:\Html5\Plugins\ToolTip\ToolTip.css

Box-shadow: 2px 1px 0px 3px rgba(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实现短暂提示框。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的JavaScript相关文章