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);

}

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