编程 Javascript

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

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

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

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript 学习小结(适合新手参考)

Jul 30 Javascript

下拉菜单点击实现连接跳转功能的js代码

May 19 Javascript

调整小数的格式保留小数点后两位

May 14 Javascript

javascript文件加载管理简单实现方法

Jul 25 Javascript

实例详解jQuery Mockjax 插件模拟 Ajax 请求

Jan 12 Javascript

jQuery基于xml格式数据实现模糊查询及分页功能的方法

Dec 25 Javascript

JS 组件系列之BootstrapTable的treegrid功能

Jun 16 Javascript

JS实现留言板功能

Jun 17 Javascript

node 命令方式启动修改端口的方法

May 12 Javascript

详解webpack+ES6+Sass搭建多页面应用

Nov 05 Javascript

详解vue项目中使用token的身份验证的简单实践

Mar 08 Javascript

vue 详情跳转至列表页实现列表页缓存

Mar 27 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