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 相关文章推荐
javascript编程起步(第六课)
Jan 10 Javascript
jquery 3D球状导航的文章分类
Jul 06 Javascript
JS实现根据出生年月计算年龄
Jan 10 Javascript
JavaScript对象反射用法实例
Apr 17 Javascript
node.js学习之交互式解释器REPL详解
Dec 08 Javascript
js处理层级数据结构的方法小结
Jan 17 Javascript
canvas绘制的直线动画
Jan 23 Javascript
AngularJS监听路由变化的方法
Mar 07 Javascript
discuz表情的JS提取方法分析
Mar 22 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
Feb 11 Javascript
JS实现的简单分页功能示例
Aug 23 Javascript
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
May 03 Javascript
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通过文件头检测文件类型通用代码类(zip,rar等)
2010/10/19 PHP
php+mysqli批量查询多张表数据的方法
2015/01/29 PHP
设定php简写功能的方法
2019/11/28 PHP
一些相见恨晚的 JavaScript 技巧
2010/04/25 Javascript
基于jquery实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
2011/07/26 Javascript
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
2014/01/02 Javascript
JavaScript中的变量作用域介绍
2014/12/31 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
2015/03/11 Javascript
使用node+vue.js实现SPA应用
2016/01/28 Javascript
使用javascript插入样式
2016/03/14 Javascript
Javascript之面向对象--接口
2016/12/02 Javascript
vue通过watch对input做字数限定的方法
2017/07/13 Javascript
vue 自定义提示框(Toast)组件的实现代码
2018/08/17 Javascript
[32:17]完美世界DOTA2联赛循环赛LBZS vs Forest第二场 10月30日
2020/10/31 DOTA
python备份文件的脚本
2008/08/11 Python
python多线程http下载实现示例
2013/12/30 Python
对python append 与浅拷贝的实例讲解
2018/05/04 Python
python读取txt文件中特定位置字符的方法
2018/12/24 Python
对python调用RPC接口的实例详解
2019/01/03 Python
python-itchat 获取微信群用户信息的实例
2019/02/21 Python
Python简单基础小程序的实例代码
2019/04/28 Python
Python3使用TCP编写一个简易的文件下载器功能
2019/05/08 Python
Pytorch中的variable, tensor与numpy相互转化的方法
2019/10/10 Python
英国百安居装饰建材网上超市:B&Q
2016/09/13 全球购物
吉力贝官方网站:Jelly Belly
2019/03/11 全球购物
Madda Fella官网:美国冒险家服装品牌
2020/01/16 全球购物
求职信结尾怎么写
2014/05/26 职场文书
大学生标准自荐书
2014/06/15 职场文书
酒店七夕情人节活动策划方案
2014/08/24 职场文书
假期安全教育广播稿
2014/10/04 职场文书
2014年城管工作总结
2014/11/20 职场文书
2015年政风行风工作总结
2015/04/21 职场文书
python实现的web监控系统
2021/04/27 Python
 Python 中 logging 模块使用详情
2022/03/03 Python
解决vue-router的beforeRouteUpdate不能触发
2022/04/14 Vue.js