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);
}
最后如图提示框即可完成,且兼容性很好。
CSS写的提示框(兼容火狐IE等各大浏览器)的更多相关文章
- 纯CSS实现tooltip提示框,CSS箭头及形状之续篇--给整个tooltip提示框加个边框
在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个 ...
- 纯CSS实现tooltip提示框,CSS箭头及形状
本片介绍仅用CSS做出tooltip那样的提示框及箭头等形状! 首先介绍一下CSS:after选择器 定义和用法:(参考w3school:after选择器) :after选择器在被选元素的内容后面插入 ...
- 纯CSS制作冒泡提示框
来源:http://www.ido321.com/1214.html 前两天翻译了一篇文章,关于利用css的border属性制作基本图形:http://www.ido321.com/1200.html ...
- 纯css来实现提示框
用js用多了,就疏忽了最基本的css了---用title属性来实现提示框.下面言归正传------如何用css实现提示框: 1.利用title属性来实现鼠标滑过某个元素时,实现提示整段内容的功能(利用 ...
- 用css实现云状提示框
经常会用到云状提示框,如图: 基本框架是这样,以三角在左侧为例: <div class="container"> <div class="content ...
- css写出三角形(兼容IE)
css写出三角形 利用css写三角形,兼容IE7 .arrow-up { width:0px; height:0px; border-left:10px solid transparent; bo ...
- css制作tips提示框,气泡框,制作三角形
有时候我们的页面会需要这样的一些提示框或者叫气泡框,运用css,我们可以实现这样的效果. 为了实现上面的效果,我们首先要理解如何制作三角形. 当我们给一个DIV不同颜色的边框的时候,我们可以得到下面的 ...
- css画一个提示框
用css画一个如下图的提示框: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- 转~~~ DIV+CSS实现三角形提示框
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel= ...
随机推荐
- [ 原创 ]Centos 7.0下安装 Tomcat8.5.15
Tomcat下载地址:http://tomcat.apache.org/download-80.cgi#8.5.15 上传到文件夹 并解压缩 出现问题: 解决方法: http://blog.csdn. ...
- 机器学习之路:python 多项式特征生成PolynomialFeatures 欠拟合与过拟合
分享一下 线性回归中 欠拟合 和 过拟合 是怎么回事~为了解决欠拟合的情 经常要提高线性的次数建立模型拟合曲线, 次数过高会导致过拟合,次数不够会欠拟合.再建立高次函数时候,要利用多项式特征生成器 生 ...
- touchscreem
<触摸屏种类> 常见 电阻式触摸屏 电容式触摸屏 不常见 红外线技术触摸屏 表面声波触摸屏 适量压力传感触摸屏 <原理分析> 电阻式触摸屏 如图所示,在屏幕的上下和左右加上一个 ...
- android httpUrlConnection HttpClient
韩梦飞沙 韩亚飞 313134555@qq.com yue31313 han_meng_fei_sha httpUrlConnection 超文本传输协议统一资源定位器连接 http 超 ...
- hihocoder 1526 序列的值
题面在这里! 好久没做题啦,养生一下qwq 推一推贡献就会发现这TM就是一个水题啊! #include<bits/stdc++.h> #define ll long long using ...
- BZOJ.2428.[HAOI2006]均分数据(随机化贪心/模拟退火)
题目链接 模拟退火: 模拟退火!每次随机一个位置加给sum[]最小的组. 参数真特么玄学啊..气的不想调了(其实就是想刷刷最优解) 如果用DP去算好像更准.. //832kb 428ms #inclu ...
- nginx与Lua执行顺序
Nginx顺序 Nginx 处理每一个用户请求时,都是按照若干个不同阶段(phase)依次处理的,而不是根据配置文件上的顺序. Nginx 处理请求的过程一共划分为 11 个阶段,按照执行顺序依次是 ...
- 关于zip伪加密
创建一个zip文件 然后用winhex打开 可以看到第二个PK头的地方对应hex区域有一场串0000000000 在这里的第四个0这里末尾修改成奇数 奇数为加密 偶数为不加密 再去打开就可以看到加密了
- vijos p1883
题意: 有些东西就如同月光的魔法一般. Luke是爱着vijos的.他想为自己心爱的东西画些什么. 就画N个圆吧.把它们的圆心都固定在x轴上. 圆与圆.为了爱,两两不能相交.为了爱,它们可以互相贴在一 ...
- bzoj 3306
以1号节点为根,弄出DFS序,我们发现,对于一个询问:(rt,u),以rt为根,u节点的子树中的最小点权,我们可以根据rt,u,1这三个节点在同一条路径上的相对关系来把它转化为以1为根的在DFS序上的 ...