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 相关文章推荐
JavaScript中的Location地址对象
Jan 16 Javascript
javascript 伪数组实现方法
Oct 11 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
Aug 23 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
May 14 Javascript
JavaScript运动减速效果实例分析
Aug 04 Javascript
javascript的replace方法结合正则使用实例总结
Jun 16 Javascript
layer弹出层框架alert与msg详解
Mar 14 Javascript
基于javaScript的this指向总结
Jul 22 Javascript
Vue三种常用传值示例(父传子、子传父、非父子)
Jul 24 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
Nov 13 Javascript
JavaScript中的回调函数实例讲解
Jan 27 Javascript
vue自定义标签和单页面多路由的实现代码
May 03 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 作用域解析运算符(::)
2010/07/27 PHP
PHP之预定义接口详解
2015/07/29 PHP
js导航菜单(自写)简单大方
2013/03/28 Javascript
Json实现异步请求提交评论无需跳转其他页面
2014/10/11 Javascript
手机Web APP如何实现分享多平台功能
2016/08/19 Javascript
Jquery Easyui表单组件Form使用详解(30)
2016/12/19 Javascript
js实现二级导航功能
2017/03/03 Javascript
d3.js入门教程之数据绑定详解
2017/04/28 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
2017/05/20 jQuery
BACKBONE.JS 简单入门范例
2017/10/17 Javascript
基于JavaScript实现五子棋游戏
2020/08/26 Javascript
Vue异步组件处理路由组件加载状态的解决方案
2018/09/07 Javascript
js笔试题-接收get请求参数
2019/06/15 Javascript
关于layui 下拉列表的change事件详解
2019/09/20 Javascript
基于form-data请求格式详解
2019/10/29 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
2020/11/07 Javascript
Python爬取读者并制作成PDF
2015/03/10 Python
Python实现的递归神经网络简单示例
2017/08/11 Python
基于python代码实现简易滤除数字的方法
2018/07/17 Python
对django layer弹窗组件的使用详解
2019/08/31 Python
Python jieba库用法及实例解析
2019/11/04 Python
jupyter 实现notebook中显示完整的行和列
2020/04/09 Python
keras实现VGG16方式(预测一张图片)
2020/07/07 Python
Java byte数组操纵方式代码实例解析
2020/07/22 Python
Shopee菲律宾:在线购买和出售
2019/11/25 全球购物
耐克亚太地区:Nike APAC
2019/12/07 全球购物
MYSQL支持事务吗
2013/08/09 面试题
商务英语大学生职业生涯规划书范文
2014/01/01 职场文书
建筑工地质量标语
2014/06/12 职场文书
2014年仓库工作总结
2014/11/20 职场文书
企业党建工作总结2015
2015/05/26 职场文书
2015年卫生院健康教育工作总结
2015/07/24 职场文书
领导莅临指导欢迎词
2015/09/30 职场文书
忠诚教育学习心得体会
2016/01/23 职场文书
pytorch 中nn.Dropout的使用说明
2021/05/20 Python
Python制作表白爱心合集
2022/01/22 Python