项目上使用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; 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); }
最后如图提示框即可完成,且兼容性很好。