使用原生Java脚本语言设计和实现工具提示浮动提示框特效，了解代码简化、事件绑定、事件冒泡等技巧和知识。

特效四个关键点：

显示：鼠标移到工具提示超链接上时，工具提示提示框可以显示出来隐藏：鼠标移开时，工具提示提示框自动隐藏定位：工具提示提示框的位置需要根据工具提示超链接的位置来设置可配置：工具提示提示框可以根据参数不同，改变尺寸和显示内容

注意点：

1)边界半径和箱形阴影兼容写法

2)不论鼠标指针穿过被选元素或其子元素，都会触发鼠标悬停事件。对应鼠标移出

只有在鼠标指针穿过被选元素时，才会触发鼠标输入事件。对应老鼠叶

3)W3C规定不允许内联元素嵌套块级元素，其中的a链接嵌套了div，可能不符合万维网路联盟(Consortium环球网简称W3C)标准（提示：他是移入a链接的时候在a链接中创建的div)

简单的函数封装写法（便于引用，缩短代码量):

1)通过元素的编号获得元素的数字正射影像图引用

var $=function(id){返回文档。getelementbyid(id)；}2)绑定事件的函数

函数addEvent(obj，Event，fn){ //要绑定的元素对象，要绑定的事件，触发的回调函数if(obj.addEventListener){ //非IE，支持冒泡和捕获obj.addEventListenner(event，fn，false)；}else if(obj.attachEvent){ //IE，只支持冒泡obj.attachEvent('on' event，fn)；}}效果如图：

！DOCTYPE html html head lang=' en ' meta charset=' UTF-8 ' title/title/head style type=' text/CSS ' body { font-size : 14px；线高： 1.8;背景： url('img/bg.jpg ')无重复中心顶部；字体系列： '微软雅黑；} #演示{ width : 500 pxmargin : 30px自动；padding: 20px 30px相对位置：背景-color : # fff；边框半径： 10px-moz-border-半径： 10px/*这个属性主要是专门支持Mozilla Firefox火狐浏览器的半铸钢钢性铸铁(铸造半钢)属性*/-网络套件-边框-半径： 10px/*苹果；谷歌，等一些浏览器认，因为他们都用的是webkit内核*/box-shadow : 0px 0px 0px 10px rgba(0，0，0，0.2)；-moz-box-shadow : 0px 0px 0px 10px rgba(0，0，0，0.2)；-web kit-box-shadow : 0px 0px 0px 10px rgba(0，0，0，0.2)；} #演示h2 { color: # 03f} #演示。工具提示{ color: # 03fcursor:帮助；} .工具提示框{ display:块背景# fff线高： 1.6;border: 1px固体# 66 ccffcolor : # 333 padding : 20px font-size : 12px；边界半径： 5px-moz-border-radius : 5px；-web套件-边框-半径： 5px飞越：汽车；} # mycard img {左侧浮动：宽度： 100像素；高度： 100像素；向左划水： 10px} # mycard p { float:宽度： 150像素；padd : 0 10px }/style脚本类型=' text/JavaScript '窗口。onload=function(){//绑定事件的函数函数addEvent(obj，Event，fn){ //要绑定的元素对象，要绑定的事件，触发的回调函数if(obj.addEventListener){ //非IE，支持冒泡和捕获obj.addEventListener(event，fn，false)；}else if(obj.attachEvent){ //IE，只支持冒泡obj.attachEvent('on' event，fn)；} } //通过用户代理的方式判断是否是工业管理学(工业工程)的方法，不能判断出IE11 var isIE=导航器。用户代理。indexof(' MSIE ')-1；var $=function(id){返回文档。getelementbyid(id)；} var demo=$(' demo ')；//obj -工具提示超链接元素//id -工具提示提示框id //html -工具提示提示框超文本标记语言内容//宽度-工具提示提示框宽度（可选)//高度-工具提示提示框高度（可选)函数显示工具提示(对象，id，html，宽度，高度){ if($(id)=null){//创建div class='tooltip-box' id='xx '