CSS写的提示框（兼容火狐IE等各大浏览器）

项目上使用jQuery的Tooltip组件，在谷歌上正常，在火狐和IE下没有效果，所以根据谷歌的提示框单独用CSS写了个提示框，比较好的兼容了火狐和IE，且效果一样

原Tooltip代码：

$('#dd').tooltip({
    position: 'right',    
    content: '<span style="color:#fff"><s:text name="com.vrv.cems.policy.template.userPassword.localPass.passComplex.info1"/><br/>'
        +'<s:text name="com.vrv.cems.policy.template.userPassword.localPass.passComplex.info2"/><br/>'
        +'<s:text name="com.vrv.cems.policy.template.userPassword.localPass.passComplex.info3"/><br/>'
        +'<s:text name="com.vrv.cems.policy.template.userPassword.localPass.passComplex.info4"/><br/>'
        +'<s:text name="com.vrv.cems.policy.template.userPassword.localPass.passComplex.info5"/><br/>'
        +'<s:text name="com.vrv.cems.policy.template.userPassword.localPass.passComplex.info6"/><br/>'
        +'<s:text name="com.vrv.cems.policy.template.userPassword.localPass.passComplex.info7"/><br/>'
        +'<s:text name="com.vrv.cems.policy.template.userPassword.localPass.passComplex.info8"/><br/>'
        +'<s:text name="com.vrv.cems.policy.template.userPassword.localPass.passComplex.info9"/></span>',    
    onShow: function(){        
        $(this).tooltip('tip').css({backgroundColor: '#666',borderColor: '#666'});
    }        
});

 

 使用CSS修改：a标签后加个div存储提示框内容

<span><a id="dd" href="javascript:void(0)" style="color: blue"><s:text name="com.vrv.cems.policy.template.userPassword.localPass.passComplex"/></a></span>
<div id="small-tip">
	<span><s:text name="com.vrv.cems.policy.template.userPassword.localPass.passComplex.info1"/></span><br/>
	<span><s:text name="com.vrv.cems.policy.template.userPassword.localPass.passComplex.info2"/></span><br/>
	<span><s:text name="com.vrv.cems.policy.template.userPassword.localPass.passComplex.info3"/></span><br/>
	<span><s:text name="com.vrv.cems.policy.template.userPassword.localPass.passComplex.info4"/></span><br/>
	<span><s:text name="com.vrv.cems.policy.template.userPassword.localPass.passComplex.info5"/></span><br/>
	<span><s:text name="com.vrv.cems.policy.template.userPassword.localPass.passComplex.info6"/></span><br/>
	<span><s:text name="com.vrv.cems.policy.template.userPassword.localPass.passComplex.info7"/></span><br/>
	<span><s:text name="com.vrv.cems.policy.template.userPassword.localPass.passComplex.info8"/></span><br/>
	<span><s:text name="com.vrv.cems.policy.template.userPassword.localPass.passComplex.info9"/></span>	
</div>

 给div加样式：（当然，提示框需要别的样式可以直接在这修改样式即可）

#small-tip{
	display:none;
	position:absolute;
	color:#fff;
	background:#666;
	padding:5px;
	width:250px;
}

 最后，给div#small-tip定位 和 给a标签绑定鼠标事件

/*设置密码提示框*/
$("#dd").mouseover(function(){
	$("#small-tip").css("display","block");
	setTipPlace();
});
$("#dd").mouseleave(function(){
	$("#small-tip").css("display","none");
});

function setTipPlace(){
	var aWidth = parseFloat($("#dd").width(),10),
		aHeight = parseFloat($("#dd").height(),10),
		tipHeight = parseFloat($("#small-tip").height(),10);
	var tipTop = - ( aHeight + tipHeight ) / 2 + "px",
	tipLeft= ( aWidth + 30 ) + "px";
	$("#small-tip").css("margin-left", tipLeft);
	$("#small-tip").css("margin-top", tipTop);
}

 最后如图提示框即可完成，且兼容性很好。