JavaScript实现短暂提示框功能的方法

　　介绍

这篇文章主要介绍了JavaScript实现短暂提示框功能的方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。

业务场景:当鼠标移入某元素时,显示提示框进行介绍。当鼠标移除时,会自动消失。引入ToolTip.js和ToolTip.css

主方法:工具提示。表演(需要提示的元素id,随意不重复即可,要提示的html文本,宽(可不指定),高(可不指定));

提示。显示(obj, id、html、宽度、高度),

效果如下:

1。显示文本:

2:显示图片

, 3:显示网站

js代码:F: \ Html5工具提示\ Plugins \ \ js \ ToolTip.js ,,,

(function (), { 　　,var ToolTip =, {};/* * 　　,*显示函数　　,*/=,,ToolTip._showTip function (parentId, childId,, html,宽度,,高度),{ 　　,var parent =, . getelementbyid (parentId)//要提示的元素　　,var child =, . getelementbyid (childId); 　　,if (child ===, null),{//创建　　var 才能;toolTip =, document.createElement (“div"); 　　toolTip.classList =,才能“ui-tooltip-box"; 　　时间=toolTip.id 才能;childId; 　　toolTip.innerHTML 才能=,html; 　　parent.appendChild才能(提示); 　　时间=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 (),{,//延迟: 　　,,. getelementbyid (childId) .style.display =,“none"//隐藏　　,,},300); 　　,,} 　　,}else {//才能显示　　. getelementbyid (childId) .style.display 才能=,“block"; 　　,} 　　},/* * 　　*,才能调用入口　　,*/=,,ToolTip.show function (parentId, childId,, html,宽度,,高度),{ 　　var 才能;parent =, . getelementbyid (obj) 　　时间=parent.onmouseenter 才能;function (ev), { 　　ToolTip._showTip才能(parentId, childId,, html,宽度,高度) 　　,,} 　　,}=,window.ToolTip 提示; 　　})();//为防止污染,将方法写在匿名函数中

html代码:F: \ Html5工具提示\ Plugins \ \工具提示。html

& lt; ! DOCTYPE html> 　　& lt; html lang=癳n"祝辞　　& lt; head> 　　,& lt; meta charset=癠TF-8"比; 　　,& lt; title>提示框& lt;/title> 　　,& lt; link rel=皊tylesheet",类型=拔谋?css" https://www.yisu.com/zixun/, href=" ToolTip.css rel="外部nofollow”> 　　　　js/ToolTip.js