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

主方法：ToolTip.show(需要提示的元素id，随意不重复即可，要提示的超文本标记语言文本，宽（可不指定), 高（可不指定));

ToolTip.show(obj，id，html，宽度，高度);

效果如下：

1.显示文本：

2:显示图片

3:显示网站

射流研究…代码：F: Html5 插件工具提示jsToolTip.js

(function(){ var ToolTip={ }；/** * 显示函数*/工具提示._showTip=函数(parentId，childId，html，宽度，高度){ var parent=document。getelementbyid(parentId)//要提示的元素var child=文档。getelementbyid(子id)；if (child===null) {//创建var toolTip=文档。创建元素(' div ')；工具提示。类列表=' ui-tooltip-box '；tooltip . id=childidtooltip . innerhtml=html parent . appendchild(工具提示);toolTip.style.width=width？宽度px ' : '自动'工具提示。风格。身高=身高？高度px' : '自动'//定位：工具提示。风格。位置='绝对'；工具提示。风格。display=' blockvar left=parent . offsetleftvar top=parent . offsettopif(左工具提示。与文档的偏移量。尸体。客户端宽度){左=文档。尸体。客户端宽度/2；}工具提示。风格。left=left ' px工具提示。风格。top=前20个“px”；父母。onmouseleave=function(ev){ setTimeout(function(){//延迟：文档。getelementbyid(子id)。风格。显示='无'；//隐藏}, 300);} } else { //显示文件。getelementbyid(子id)。风格。display=' block} }, /** * 调用入口*/ToolTip。show=函数(父id、childId、html、宽度、高度){ var parent=document。getelementbyid(obj)父级。onmouseenter=function(ev){ ToolTip ._showTip(parentId，childId，html，宽度，高度)} }窗口ToolTip=ToolTip })()；//为防止污染，将方法写在匿名函数中超文本标记语言代码：F: Html5 插件工具提示工具提示。超文本标记语言

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题提示框/title link rel='样式表type=' text/CSS ' href='工具提示。CSS ' rel='外部无跟随'/headdydiv class=' ui-tooltip-demo ' pa class=' ui-tooltip ' id=' tooltip-text '唐诗/a/p pa class=' ui-tooltip ' id=' tooltip-photo '背景图片/a/p pa class=' ui-tooltip ' id=' tooltip-poem ' yi人诗社/a/p/div脚本src=' http : js/tooltip。js/调用方式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 :http://www。托里。顶部'宽度=' 480像素'高度=' 300像素'/工具提示。show('工具提示-诗'，' 03 '，html)；/script/body/htmlcss代码：F: Html5 插件工具提示ToolTip.css

正文{ font-size : 14px线高： 1.8;背景-图像： URL(' imgs/BG。jpg’)；}.ui-tooltip-demo { width : 500 px；余量： 30px自动；padding: 20px 30px背景-color: rgba(100%、100%、100%、0.4)；边框半径： 10px文本对齐：中心；盒影： 2px 1px 0px 3px rgba(0，0，0，0.2)；}.用户界面工具提示-演示ui-tooltip { color : # 03f；font-size : 18px光标：帮助；}.ui-tooltip-box { display : }块；背景# fff线高： 1.6;border: 1px固体# 6 cfcolor : # 333 adding : 20pxfont-size : 12px；边界半径： 5px飞越：汽车；}总结

以上是边肖介绍的JavaScript实现的简短提示框，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！