html tooltips效果,CSS3+jQuery轻松实现工具提示(Tooltips)
在前文中介绍过《纯CSS3工具提示(Tooltips)》,本文将继续介绍CSS3+jQuery实现的工具提示(Tooltips),本实例引用了jQuery文件,却增强了提示框的显示效果,添加了渐入的动画效果,在用户体验上好过前文介绍的《纯CSS3工具提示(Tooltips)》。
CSS3+jQuery轻松实现工具提示(Tooltips)
css代码ol {
margin: 0;
*margin-left: 20px;
padding: 0;
list-style: decimal-leading-zero inside;
}
ol li {
margin: 20px 0;
}
.tooltip {
position: relative;
display: inline-block;
cursor: help;
white-space: nowrap;
border-bottom: 1px dotted #777;
}
.tooltip-content {
opacity: 0;
visibility: hidden;
font: 12px Arial, Helvetica;
text-align: center;
border-color: #aaa #555 #555 #aaa;
border-style: solid;
border-width: 1px;
width: 150px;
padding: 15px;
position: absolute;
bottom: 40px;
left: 50%;
margin-left: -76px;
background-color: #fff;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,.1)), to(rgba(255,255,255,0)));
background-image: -webkit-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
background-image: -moz-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
background-image: linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
-moz-box-shadow: 1px 1px 0 #555,
2px 2px 0 #555,
3px 3px 1px rgba(0, 0, 0, .3),
0 1px 0 rgba(255,255,255, .5) inset;
-webkit-box-shadow: 1px 1px 0 #555,
2px 2px 0 #555,
3px 3px 1px rgba(0, 0, 0, .3),
0 1px 0 rgba(255,255,255, .5) inset;
box-shadow: 1px 1px 0 #555,
2px 2px 0 #555,
3px 3px 1px rgba(0, 0, 0, .3),
0 1px 0 rgba(255,255,255, .5) inset;
-webkit-transition: bottom .2s ease, opacity .2s ease;
-moz-transition: bottom .2s ease, opacity .2s ease;
-ms-transition: bottom .2s ease, opacity .2s ease;
-o-transition: bottom .2s ease, opacity .2s ease;
transition: bottom .2s ease, opacity .2s ease;
}
.tooltip-content:after,
.tooltip-content:before {
border-right: 16px solid transparent;
border-top: 15px solid #fff;
bottom: -15px;
content: "";
position: absolute;
left: 50%;
margin-left: -10px;
}
.tooltip-content:before {
border-right-width: 25px;
border-top-color: #555;
border-top-width: 15px;
bottom: -15px;
}
.tooltip:hover .tooltip-content{
opacity: 1;
visibility: visible;
bottom: 30px;
}
Javascript代码
先引用jQuery文件,推荐使用百度公共库文件。
编写JS程序$(document).ready(function(){
$('[data-tooltip]').addClass('tooltip');
$('.tooltip').each(function() {
$(this).append('' + $(this).attr('data-tooltip') + '');
});
if ($.browser.msie && $.browser.version.substr(0,1)<7)
{
$('.tooltip').mouseover(function(){
$(this).children('.tooltip-content').css('visibility','visible');
}).mouseout(function(){
$(this).children('.tooltip-content').css('visibility','hidden');
})
}
});
html代码
的有效性、响应时间以及打开
速度。">网站速度测试从而加以优化改善。">网站速度诊断
使用说明
为需要使用工具提示(Tooltips)的文字添加一个font标签,此外也可以使用其他文字标签如i,span,b等。
在文字标签里添加data-tooltip属性,其属性值即是提示文字。特别说明一下,可以使用
来实现换行。
您可能对以下文章也感兴趣
html tooltips效果,CSS3+jQuery轻松实现工具提示(Tooltips)相关推荐
- html重叠图片滑动效果,CSS3/jQuery实现移动端滑动图片层叠效果
我个人比较喜欢这些个H5网页特效,没事就会找一些别人写好的代码修修改改 左右滑动距离代码控制:170 (数字越大滑动距离越短)window.CP.exitedLoop(3); initX = mous ...
- Arctext.js - 基于 CSS3 jQuery 的文本弯曲效果
Arctext.js 是基于 Lettering.js 的文本旋转插件,根据设置的旋转半径准确计算每个字母的旋转弧度并均匀分布.虽然 CSS3 也能够实现字符旋转效果,但是要让安排每个字母都沿着弯曲路 ...
- Stickup – 轻松实现元素固定效果的 jQuery 插件
粘贴是一个简单的 jQuery 插件,在页面滚动的时候固定一个元素到浏览器窗口的顶部,让其总是保持在视图中可见.这个插件作用于多页的网站,但是对于单页的布局有额外的功能.借助 CSS,还可以实现当前视 ...
- css3+jQuery制作导航菜单(带动画效果)
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>css ...
- 微信html抽奖转盘代码,使用CSS3+jquery.js 实现微信抽奖转盘效果
最近想起了刚接到这个项目时第一时间脑海里迸出的解决方法 "CSS3"! 为什么不能用CSS3来实现呢? 所以我打算用CSS3来实现这个效果.并不需要依赖jquery的动画效果插件, ...
- 微信大转盘 java_[Java教程]使用CSS3+jquery.js 实现微信抽奖转盘效果
[Java教程]使用CSS3+jquery.js 实现微信抽奖转盘效果 0 2014-03-19 02:00:24 上次发表了一篇 微信抽奖转盘活动-效果源码分析 最近想起了刚接到这个项目时第一时间脑 ...
- css3+jquery仿win7开机效果
css3+jquery仿win7开机效果 <!doctype html> <html lang="en"> <head> <me ...
- html制作小车,HTML5 实现小车动画效果(Canvas/CSS3/JQuery)
当前位置:编程学习 > html/css >> HTML5 实现小车动画效果(Canvas/CSS3/JQuery) HTML5正在变得越来越流行.在这个移动设备日益增长的时代,对来 ...
- HTML5+CSS3+JQuery小实例:简单又令人惊艳的hover效果登录界面
今天给大家带来一个小案例,HTML5+CSS3+JQuery实现简单又令人惊艳的hover效果登录界面. 先看效果: 源代码: <div class="container"& ...
- html文字翻牌效果,css3翻牌效果
原理:通过css3属性-webkit-transform: rotate(0deg)与-webkit-transform: rotate(180deg)对2个元素设置正反面 然后通过有过渡(trans ...
最新文章
- android 自定义录像机,android-camera2 - 将自定义捕获请求构建器选项设置为使用Camera2 API捕获图像以使用OpenCV库进行摄像机校准 - 堆栈内存溢出...
- 为反对种族歧视,GitHub正在把master/slave等术语替换掉
- 正则满足中文的顿号_常用的正则表达式、正则表达式之断言
- 我的研究生这三年(含腾讯AI Lab实习、CVPR发表经验)
- 上传文件input(type=file)美化。
- 字符输入流读取字符数据
- 计算机等级考试二级快速复习法
- python axis 0_Python之NumPy(axis=0/1/2...)的透彻理解
- 谷歌大脑联手Hinton提出SimCLR新框架,疯狂提升自监督学习性能
- gitlab详细安装过程,错误解决方案
- 下载丨OGG实战项目总结
- 算法47----大数
- lvs+keepalived+nginx实现高性能负载均衡集群 高性能jsp集群
- java 走马灯程序,详解微信小程序实现跑马灯效果(附完整代码)
- mysql utf8转gbk cmd_修改xampp的mysql数据库utf8mb4为gbk以解决cmd内中文显示为问号
- 验证码计时 -- UIButton setTitle 闪烁问题解决方案
- [2018.07.10 T1]叠盒子
- express快速入门【含源码压缩包下载】
- 哪个牌子的蓝牙耳机音质好?音质比较好的蓝牙耳机排名
- python实现视频ai换脸_python 实现 AI 换脸