张经纬的博客 - 分享网站建设知识及经验的博客

<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>&lt; ![endif]--&gt;</div>
<div class="onTips">
<input style="background:red; border:1px solid #000;" maxlength="134217727" size="20" type="text" /></div>
</div>

/*  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; /* 不允许折行 */
}

$(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()
	});
});