jQuery插件Tooltipster实现漂亮的工具提示


Posted in Javascript onApril 12, 2015

Tooltipster是一个轻量级的jQuery工具提示插件,可以快速的帮助你生成漂亮的工具提示。

1,加载jQuery和包括Tooltipster的插件文件

在您下载Tooltipster,移动tooltipster.css和jquery.tooltipster.min.js到根的CSS和JavaScript的目录。接下来,加载jQuery和包括您的标签里面Tooltipster的CSS和JavaScript文件:

<head> 
... 
 
  <link rel="stylesheet" type="text/css" href="css/tooltipster.css" /> 
 
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.0.min.js"></script> 
  <script type="text/javascript" src="js/jquery.tooltipster.min.js"></script> 
 
... 
</head>

2,设置你的HTML

为了Tooltipster工作,我们首先需要添加.tooltip类(或任何类别/选择意味着你想使用)的任何元素,我们希望有一个工具提示。接下来,我们将设置标题属性,无论我们希望我们的提示说。下面是一些例子:
添加工具提示的图像:

<img src="my-image.png" class="tooltip" title="This is my image's tooltip message!" />

添加工具提示已经有一个类的链接:

<a href="http://calebjacob.com" class="ketchup tooltip" title="This is my link's tooltip message!">Link</a> 

添加工具提示一个div:

<div class="tooltip" title="This is my div's tooltip message!">  

    This div has a tooltip when you hover over it! 

</div>

3,激活Tooltipster

我们要做的最后一件事就是激活插件。要做到这一点,你的结束</ head>前才添加下面的脚本标签(使用任何选择你想 - 在这种情况下,我们使用的是.tooltip类):

<head> 
  ... 
  <script> 
    $(document).ready(function() { 
      $('.tooltip').tooltipster(); 
    }); 
  </script> 
</head>

总结:

1.工具提示支持HTML标签内容

2.轻量级

3.灵活高效

4.样式定义简单,100%的CSS

5.支持3种主题

6.支持firefox,Chrome,IE7/8/9,Opera,Safari

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
js实现DIV的一些简单控制
Jun 04 Javascript
document.open() 与 document.write()的区别
Aug 13 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
Mar 20 Javascript
js改变img标签的src属性在IE下没反应的解决方法
Jul 23 Javascript
JavaScript中实现继承的三种方式和实例
Jan 29 Javascript
js通过iframe加载外部网页的实现代码
Apr 05 Javascript
javascript中attachEvent用法实例分析
May 14 Javascript
Bootstrap进度条组件知识详解
May 01 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
vue设置一开始进入的页面教程
Oct 28 Javascript
Vue ​v-model相关知识总结
Jan 28 Vue.js
vue ant design 封装弹窗表单的使用
Jun 01 Vue.js
jQuery插件MixItUp实现动画过滤和排序
Apr 12 #Javascript
jQuery实现简单二级下拉菜单
Apr 12 #Javascript
纯JS实现旋转图片3D展示效果
Apr 12 #Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
Apr 12 #Javascript
jQuery表单美化插件jqTransform使用详解
Apr 12 #Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
Apr 12 #Javascript
jQuery插件StickUp实现网页导航置顶
Apr 12 #Javascript
You might like
用PHP实现图象锐化代码
2007/06/14 PHP
php正则表达式学习笔记
2015/11/13 PHP
php基于ob_start(ob_gzhandler)实现网页压缩功能的方法
2017/02/18 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
javascript window.opener的用法分析
2010/04/07 Javascript
JavaScript Date对象 日期获取函数
2010/12/19 Javascript
javascript中的循环语句for语句深入理解
2014/04/04 Javascript
JavaScript字符串对象substr方法入门实例(用于截取字符串)
2014/10/16 Javascript
js验证真实姓名与身份证号是否匹配
2015/10/13 Javascript
js跨域请求数据的3种常用的方法
2015/12/01 Javascript
jquery实现简单文字提示效果
2015/12/02 Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
2016/06/08 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
2016/08/23 Javascript
基于JavaScript实现焦点图轮播效果
2017/03/27 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
2018/04/24 Javascript
vue插件draggable实现拖拽移动图片顺序
2018/12/01 Javascript
mpvue 单文件页面配置详解
2018/12/02 Javascript
微信小程序实现购物页面左右联动
2019/02/15 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
2019/08/07 Javascript
如何基于JS截获动态代码
2019/12/25 Javascript
[56:45]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第一局
2016/02/28 DOTA
深入解析Python中的线程同步方法
2016/06/14 Python
Python正则表达式使用范例分享
2016/12/04 Python
Python实现App自动签到领取积分功能
2018/09/29 Python
详解python中的线程与线程池
2019/05/10 Python
python时间序列数据转为timestamp格式的方法
2020/08/03 Python
html5 worker 实例(一) 为什么测试不到效果
2013/06/24 HTML / CSS
世界最大的票务市场:viagogo
2017/02/16 全球购物
Sperry澳大利亚官网:源自美国帆船鞋创始品牌
2019/07/29 全球购物
日本最大的彩色隐形眼镜销售网站:CharmColor
2020/09/09 全球购物
医药学专业大学生职业生涯规划书论文
2014/01/21 职场文书
食堂采购员岗位职责
2015/04/03 职场文书
工程服务质量承诺书
2015/04/29 职场文书
起诉意见书范文
2015/05/19 职场文书
前端JavaScript大管家 package.json
2021/11/02 Javascript
使用Java去实现超市会员管理系统
2022/03/18 Java/Android