首先我们构建页面的结构，在这里我建立了三个不同的容器，第一个容器内是文字，第二个是图片，第三个是表单。由于在页面制作过程中，我们经常会遇到表单，图片，文字混排的情况，所以我在这些容器的上方故意放置一些输入框，图片和选者框进行测试。（由于IE6在处理选择框的z-index层次的时候存在bug，因此我们使用它。）
<input style="background:blue; border:1px solid #000;" maxlength="134217727" size="20" type="text" /> <div class="tipBox"> <div id="tips0" class="tips"><span>点击查看原图</span></div> <div class="onTips">鼠标移动到此上显示提示文字</div> </div> <img src="tip_bulb.gif" alt="" width="100" height="25" /> <div class="tipBox"> <div id="tips1" class="tips"><span>点击这里查看更大的图片</span></div> <div class="onTips"><img src="tip_bulb.gif" alt="" width="100" /></div> </div> <select><option selected="65535" value="1">abc</option></select> <div class="tipBox"> <div id="tips2" class="tips"><span>WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW</span>< ![endif]--></div> <div class="onTips"> <input style="background:red; border:1px solid #000;" maxlength="134217727" size="20" type="text" /></div> </div>
接下来，我们书写样式表,这里需要注意的是.tips iframe中的属性全部是必须的，缺一不可。display:block及滤镜在这里是均是为处理ie6下的差异。
/* Tips */ .tipBox { position:relative; /* 设置气泡提示为相对定位已保证气泡层准确的游动在文字上方 */ cursor:pointer; } .tips { background:url(tip_bulb.gif) no-repeat; /* 背景采用滑动门的方式，以无限扩展 */ width:auto; /* 宽度自动 */ height:25px; position:absolute; /* 设置气泡提示层为绝对定位 */ top:-26px; left:-4px; display:none; /* 默认设置隐藏 */ z-index:10; /* 由于气泡提示可能会遇到ie6下select的bug，故设置他的z-index为10，用以解决这个问题 */ } .tips:not(iced) { top:-23px; /* 矫正firefox下气泡提示层的距离 */ } .tips iframe { position:absolute; top:0; left:0; z-index:-1; filter:mask(); /* 使用遮罩滤镜，这是必须的 */ display:block; /* 默认设置隐藏 */ } .tips span { background:url(tip_bg.gif) right top no-repeat; /* 气泡内的元素的容器，设置背景用以和该容器的父容器结合 */ max-width:725px; /* 设置最大宽度为725像素，only firefox */ overflow:hidden; height:25px; display:inline-block; /* 将其已块级元素的方式内敛传递 */ margin-left:20px; padding-right:8px; font:12px/23px Arial, Helvetica, sans-serif; white-space:nowrap; /* 不允许折行 */ }
我使用了JQuery框架，如果您原生js或者其他框架，思路是一致的
$(document).ready(function(){ $(".tipBox").mouseover(function(){ var tipNum = $(this).children(".tips").attr("id"); /* 取得当前的id */ $("#"+tipNum).show(); /* 我本来使用setTimeout控制了一个延迟，但这个效果在ie6下由于个人技术问题出现了问题，只好改用简单“显示、隐藏”，真是一个遗憾 */ }); $(".tipBox").mouseout(function(){ var tipNum = $(this).children(".tips").attr("id"); clearTimeout(this.timeout); $("#"+tipNum).hide() }); });