`

jQuery插件qTips实现简单tooltip小提示条

阅读更多
jQuery插件qTips是一个非常简单的小提示条工具,使用简单,效果图如下:

http://cgxcn.blog.163.com/blog/static/1323124220095475539298/

自定义提示条样式,提示条样式名为qtip-wrapper(具体可查看qtips的JS文件),示例如下:

div.qtip-wrapper {
z-index: 999;
text-align: center;
position: absolute;
font-size: .9em;
width: 250px;
background: transparent url(arrow.png) no-repeat scroll center bottom;
color: #fff;
padding-bottom: 5px;
display: none
}

div.qtip-wrapper div {
background: #333 none;
padding: 5px;
font: normal normal .9em/1em "Arial", verdana, sans-serif;
}
使用实例
一,包含文件部分

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.qtips.js" type="text/javascript"></script>
二,HTML部分

<div class="box" style="left: 25px; top: 75px; width: 100px; height: 100px;">测试盒子1</div>
<div class="box" style="right: 135px; top: 165px; width: 75px; height: 75px;">测试盒子2</div>
<div class="box" style="left: 225px; top: 275px; width: 50px; height: 50px;">测试盒子3</div>
<div class="box" style="left: 625px; top: 575px; width: 25px; height: 25px;">测试盒子4</div>
四个实例,分别在网页不同地方显示小提示条

三,Javascript部分

<script type="text/javascript">
$(document).ready(function(){
$('div').qtip({content:'必优博客-技术源于实践,实践必然优秀! ', position:'center'});
});
</script>
Javascript部分指定需要显示提示条的对象并自定义提示内容和提示位置,实例中给所有DIV增加小提示功能。
注意有两个参数:
content表示提示文字内容
position表示提示位置

使用qTips最主要的就是要清楚提示条的CSS样式以及显示的小图标,这些已存在下载的文件包中(arrow.png),大家

可根椐需求进行适当的修改,另外tips还有几个参数,列表如下:

container: 'qtip',
content: '',
position: 'center',
nudge_top: 10,
nudge_left: 0,
preRender: function(e, tip){},
postRender: function(e, tip){},
onShow: function(e, tip){},
onHide: function(e, tip){},
解释如下:

container表示当前提示条容器名
content表示提示内容
position表示提示位置,可选center、left和right
nudge_top表示上微移
nudge_left表示左微移
preRender表示读取提示条前触发的函数
postRender表示读取提示条触发的函数
onShow表示显示提示条触发的函数
onHide表示隐藏提示条触发的函数
使用tips相比tooltip更加简单,两者都需要自定义提示条CSS样式,不过功能上tips比较单一,对于实现一个简单的提示条功能来说,jQuery插件qTips还是一个非常不错的选择。

分享到:
评论

相关推荐

    extjs 如何给column 加上提示

    本文将详细讲解EXTJS如何为Column添加提示(Tooltip)。 首先,EXTJS中的提示功能主要通过`qtip`属性实现,这是一个内建的属性,允许我们在表格的单元格中设置提示文本。在EXTJS的GridPanel中,我们可以通过定义...

    一个支持annotation的SSH整合示例项目

    卷 (USB)Project 的文件夹 PATH 列表 卷序列号码为 0006EE44 CCBE:F425 I:. │ .project │ pom.xml │ pom.xml~ │ text.txt │ ├─.settings │ org.maven.ide.eclipse.prefs ...│ │ org.eclipse.wst.common....

    计算机图形学之动画和模拟算法:Inverse Kinematics:游戏开发中的逆向运动学实现.docx

    计算机图形学之动画和模拟算法:Inverse Kinematics:游戏开发中的逆向运动学实现.docx

    nacos 后台启动脚本nacos 后台启动脚本nacos 后台启动脚本nacos 后台启动脚本nacos 后台启动脚本naco

    nacos 后台启动脚本nacos 后台启动脚本nacos 后台启动脚本nacos 后台启动脚本nacos 后台启动脚本nacos 后台启动脚本nacos 后台启动脚本nacos 后台启动脚本nacos 后台启动脚本nacos 后台启动脚本nacos 后台启动脚本nacos 后台启动脚本nacos 后台启动脚本nacos 后台启动脚本nacos 后台启动脚本nacos 后台启动脚本nacos 后台启动脚本nacos 后台启动脚本nacos 后台启动脚本nacos 后台启动脚本nacos 后台启动脚本nacos 后台启动脚本nacos 后台启动脚本nacos 后台启动脚本nacos 后台启动脚本nacos 后台启动脚本nacos 后台启动脚本nacos 后台启动脚本nacos 后台启动脚本nacos 后台启动脚本nacos 后台启动脚本nacos 后台启动脚本nacos 后台启动脚本nacos 后台启动脚本nacos 后台启动脚本nacos 后台启动脚本nacos 后台启动脚本nacos 后台启动脚本nacos 后台启动脚本nacos 后台启动脚本nacos 后台启动脚本nacos 后台

    Java SpringBoot Vue 毕业设计/节课作业【10个完整项目+源码+数据库+毕设论文+视频部署讲解】

    Java 毕业设计/节课作业【10个完整项目+源码+数据库+毕设论文+视频部署讲解】, 1智能摄影分享网站系统, 2智能养老院管理系统, 3智能考编论坛网站的设计与实现, 4智能仓库管理系统, 5智能足球社区管理系统, 6智能社区物资交易互助平台, 7智能校园失物招领系统, 8智能it职业生涯规划系统--论文, 9智能javaweb的新能源充电系统pf, 10智能“共享书角”图书借还管理系统--论文

    基于python + openCV 实现的人脸识别

    【作品名称】:基于python + openCV 实现的人脸识别 【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】:实验环境 python 2.7 numpy 1.12.1 Pillow 4.1.1 openCV 2.4.13 人脸识别程序主要分为三个部分: 创建一个dataset:datasetCreator.py 训练识别器:trainner.py 检测器:detector.py dataset 通过摄像头每隔0.1s检测一次人脸,并将检测到的人脸储存至dataSet路径下(如果没有,需要自己创建) trainner 使用openCV自带的LBP人脸特征值提取方法对dataSet路径下的所有人脸进行识别训练 生成训练文件trainningData.yml存放在recognizer路径下 detector 使用训练后的识 【资源声明】:本资源作为“参考资料”而不是“定制需求”,代码只能作为参考,不能完全复制照搬。需要有一定的基础看懂代码,自行调试代码并解决报错,能自行添加功能修改代码。

    BS23-287基于Python的期货程序化交易系统的设计与实现-206jhypi.zip

    本系统的开发与设计是基于vue为前端页面核心框架为django/flask,技术方面主要采用了Html、Js、CSS3、python、Mysql。 本课题使用Python语言进行开发。代码层面的操作主要在PyCharm中进行,将系统所使用到的表以及数据存储到MySQL数据库中,方便对数据进行操作本课题基于WEB的开发平台 ②前端开发选择:Vue。 ②后端开发选择:python、django/flask。 ③数据库选择:MySQL。 ④开发工具选择:pycharm、Navicat for MySQL。 包含了我的信息、用户管理、期货公司管理、开户信息管理、充值信息管理、期货期货信息管理、期货投资管理、取消投资管理、投资风险管理、意见反馈、系统管理

    非常好的电子设计小软件屏幕颜色获取软件非常好用的软件.zip

    非常好的电子设计小软件屏幕颜色获取软件非常好用的软件.zip

    基于java+ssm+vue+mysql的网上房屋中介管理系统 源码+数据库+论文(高分毕业设计).zip

    项目已获导师指导并通过的高分毕业设计项目,可作为课程设计和期末大作业,下载即用无需修改,项目完整确保可以运行。 包含:项目源码、数据库脚本、软件工具等,该项目可以作为毕设、课程设计使用,前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷,具有很高的实际应用价值。 项目都经过严格调试,确保可以运行!可以放心下载 技术组成 语言:java 开发环境:idea 数据库:MySql8.0 部署环境:Tomcat(建议用 7.x 或者 8.x 版本),maven 数据库工具:navicat

    springboot034基于Springboot+Vue在线商城系统设计与开发毕业源码案例设计.zip

    springboot034基于Springboot+Vue在线商城系统设计与开发毕业源码案例设计 1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。

    高校校园跑腿系统的设计app.zip

    基于安卓的毕业设计源码

    基于java+ssm+vue+mysql的小工程预算系统 源码+数据库+论文(高分毕业设计).zip

    项目已获导师指导并通过的高分毕业设计项目,可作为课程设计和期末大作业,下载即用无需修改,项目完整确保可以运行。 包含:项目源码、数据库脚本、软件工具等,该项目可以作为毕设、课程设计使用,前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷,具有很高的实际应用价值。 项目都经过严格调试,确保可以运行!可以放心下载 技术组成 语言:java 开发环境:idea 数据库:MySql8.0 部署环境:Tomcat(建议用 7.x 或者 8.x 版本),maven 数据库工具:navicat

    【创新未发表】Matlab实现引力搜索优化算法GSA-Kmean-Transformer-BiLSTM负荷预测算法研究.rar

    1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用,注释清楚,适合新手

    操作系统核心技术全面讲解

    内容概要:本书详细介绍了操作系统的基本概念、发展历程、结构特点和关键功能。从操作系统的定义、特征、功能出发,逐步探讨其形成和发展过程,涵盖人工操作阶段、单道和多道批处理、分时操作系统等多种类型。随后深入讲解操作系统的内部结构,包括整体结构、分层结构、虚拟机结构等,并重点介绍常用的Windows、UNIX和Linux系统。此外,书中详细讨论了处理器管理、存储管理、进程同步与死锁、存储管理和网络操作系统等多个核心主题,提供了丰富的实例和思考练习。 适合人群:计算机科学专业的学生、从事计算机系统开发的技术人员,尤其是初学者和有一定基础的研发人员。 使用场景及目标:帮助读者理解操作系统的基本原理和技术细节,掌握常用操作系统的特性和应用场景,适用于课程学习和实际项目开发。 其他说明:本书内容全面,理论与实践相结合,适合作为教材和参考书使用。通过阅读本书,读者不仅可以深入了解操作系统的工作原理,还可以通过思考练习提升实际操作能力。

    springboot166基于Springboot+Vue的纺织品企业财务管理系统-毕业源码案例设计.zip

    springboot166基于Springboot+Vue的纺织品企业财务管理系统-毕业源码案例设计 1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。

    电机加减速初版.zip

    keil5:步进电机(S)曲线加减速代码

    非常好的电子设计小软件MDK3.80A非常好用的软件.zip

    非常好的电子设计小软件MDK3.80A非常好用的软件.zip

    【创新未发表】Matlab实现豪猪优化算法CPO-GRU实现风电数据预测算法研究.rar

    1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用,注释清楚,适合新手

    Unity Cesium打包后无法加载显示修复工具

    Unity Cesium打包后无法加载显示修复工具 # 问题 编辑器运行正常加载显示,打包后在其它机器上无法加载显示 # 修复方法 下载到问题机器,双击InstallCesium.bat 进行修复 # 支持版本 1.2.0、1.5.0、1.7.1、1.8.0、1.11.1

    【上交所-2024研报】龙元建设2024年三季度报告.pdf

    行业研究报告、行业调查报告、研报

Global site tag (gtag.js) - Google Analytics