jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】


Posted in Javascript onJuly 19, 2016

本文实例讲述了jQuery悬停文字提示框插件jquery.tooltipster.js用法。分享给大家供大家参考,具体如下:

运行效果截图如下:

jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】

index.html页面:

<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Tooltips悬停文字提示框效果</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/tooltipster.css" />
<link rel="stylesheet" type="text/css" href="css/style2.css" />
<script type="text/javascript" src="js/jquery-2.0.0.min.js"></script>
<script type="text/javascript" src="js/jquery.tooltipster.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
     $('.tooltip').tooltipster();
  });
</script>
</head>
<body>
<br><br><br><br><br><br><br><br>
<section id="facebook">
<ul>
<a href="https://3water.com/" target="_blank"><span id="fackbook" class="tooltip" title="3water.com">3water.com</span></a>
</ul>
</section>
<section id="twitter">
<ul> 
<a href="https://3water.com/" target="_blank"><span id="twitter-default" class="tooltip" title="JS脚本代码">JS脚本代码</span></a>
</ul>
</section>
<section id="google">
<ul> 
<a href="https://3water.com/" target="_blank"><span id="google-default" class="tooltip" title="jQuery">jQuery</span></a>
</ul>
</section>
<section id="rss">
<ul> 
<a href="https://3water.com/" target="_blank"><span id="rss-default" class="tooltip" title="JS脚本代码">JS脚本代码</span></a>
</ul>
</section>
<section id="tech">
<ul> 
<a href="https://3water.com/"><span id="tech-default" class="tooltip" title="CSS3">CSS3</span></a>
</ul>
</section>
</center>
<section id="dribbble">
<ul> 
<a href="https://3water.com/" target="_blank"><span id="dribbble-default" class="tooltip" title="HTML5">HTML5</span></a>
</ul>
</section><br>
<br>
<br>
<br>
<br>
</body>
</html>

完整实例代码点击此处本站下载

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
HTML中事件触发列表与解说
Jul 09 Javascript
jQuery入门介绍之基础知识
Jan 13 Javascript
浅谈javascript 迭代方法
Jan 21 Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
Aug 07 Javascript
JavaScript常用标签和方法总结
Sep 01 Javascript
jQuery实现的自定义弹出层效果实例详解
Sep 04 Javascript
JavaScript中return用法示例
Nov 29 Javascript
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
浅谈Webpack 持久化缓存实践
Mar 22 Javascript
一个基于react的图片裁剪组件示例
Apr 18 Javascript
jquery中为什么能用$操作
Jun 18 jQuery
详解用js代码触发dom事件的实现方案
Jun 10 Javascript
使用plupload自定义参数实现多文件上传
Jul 19 #Javascript
artDialog+plupload实现多文件上传
Jul 19 #Javascript
plupload+artdialog实现多平台上传文件
Jul 19 #Javascript
如何在JS中实现相互转换XML和JSON
Jul 19 #Javascript
js 动态给元素添加、移除事件的实现方法
Jul 19 #Javascript
js实现动态创建的元素绑定事件
Jul 19 #Javascript
用js动态添加html元素,以及属性的简单实例
Jul 19 #Javascript
You might like
Php图像处理类代码分享
2012/01/19 PHP
php 中的4种标记风格介绍
2012/05/10 PHP
php顺序查找和二分查找示例
2014/03/27 PHP
PHP实现的增强性mhash函数
2015/05/27 PHP
PHP基于ICU扩展intl快速实现汉字转拼音及按拼音首字母分组排序的方法
2017/05/03 PHP
laravel 实现向公共模板中传值 (view composer)
2019/10/22 PHP
使用PHP开发留言板功能
2019/11/19 PHP
Extjs grid添加一个图片状态或者按钮的方法
2014/04/03 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
2014/04/04 Javascript
javascript处理表单示例(javascript提交表单)
2014/04/28 Javascript
jQuery中prevAll()方法用法实例
2015/01/08 Javascript
jquery实现焦点图片随机切换效果的方法
2015/03/12 Javascript
原生js实现移动端瀑布流式代码示例
2015/12/18 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
2017/08/17 Javascript
jQuery+CSS实现的table表格行列转置功能示例
2018/01/08 jQuery
使用Angular CLI生成路由的方法
2018/03/24 Javascript
vue 实现动态路由的方法
2020/07/06 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
2020/07/26 Javascript
python操作xml文件详细介绍
2014/06/09 Python
对python借助百度云API对评论进行观点抽取的方法详解
2019/02/21 Python
python实现在内存中读写str和二进制数据代码
2020/04/24 Python
Python3合并两个有序数组代码实例
2020/08/11 Python
python基于exchange函数发送邮件过程详解
2020/11/06 Python
英国Flybe航空官网:欧洲最大的独立支线廉价航空公司
2019/07/15 全球购物
英国现代、当代和设计师家具店:Furntastic
2020/07/18 全球购物
护理职业应聘自荐书
2013/09/29 职场文书
个人简历自我评价八例
2013/10/31 职场文书
酒吧副总经理岗位职责
2013/12/10 职场文书
幼儿园五一活动方案
2014/02/07 职场文书
《穷人》教学反思
2014/04/08 职场文书
我的中国梦演讲稿600字
2014/08/19 职场文书
2014年老干部工作总结
2014/11/21 职场文书
捐助感谢信
2015/01/22 职场文书
《自己去吧》教学反思
2016/02/16 职场文书
uniapp 微信小程序 自定义tabBar 导航
2022/04/22 Javascript
Android Canvas绘制文字横纵向对齐
2022/06/05 Java/Android