今天想给单位的系统弄一个提示插件,懒得自己做,于是就上网百度了几个jQuery插件,挺好用的。下面以tooltipsy插件为例,说明如何使用这些插件。

一、下载

  首先到tooltipsy的官网http://tooltipsy.com/下载插件tooltipsy.min.js。貌似官网下载有问题,我是从CSDN下载下来的。

二、安装

  在页面引入以下javaScript代码:

 <script type="text/javascript" src="/path/to/tooltipsy.min.js"></script>

  当然,具体路径需要根据实际情况修改。

三、编写样式表

  在页面引入以下样式表代码:

 <STYLE type="text/css">
.tooltipsy {
padding: 10px;
max-width: 200px;
color: #303030;
background-color: #f5f5b5;
border: 1px solid #deca7e;
}
</STYLE>

  当然这仅仅是最简单的配置,如果有特殊需求,可以查阅官方文档进行相关修改。

四、使用

  在HTML部门中的元素,只要在元素属性中加入如下内容就可以使用了,例如:

 <div>
<a class="hastip" title="看到提示了吧" >来摸我</a>
</div>

  将需要产生tip效果的元素的class属性设置为hastip,title属性设置为需要显示的语句。

  在页面中的显示如下:

  只要把鼠标移动到相关代码部分,就会弹出提示框。

  其他的插件使用方法大同小异

  更多的提示插件请看http://www.5icool.org/a/201209/710.html

轻量级jQuery工具提示插件tooltipsy使用方法的更多相关文章

  1. lightslider-支持移动触摸的轻量级jQuery幻灯片插件

    插件简介 lightslider是一款轻量级的响应式jQuery幻灯片插件.lightslider幻灯片插件能够支持移动触摸设备,它可以制作为带缩略图的内容幻灯片,或者制作为无限循环的旋转木马.它的特 ...

  2. [JQuery插件系列]-强烈推荐10个非常不错的jQuery工具提示插件

    个非常酷的 jQuery 工具提示(Tooltip)插件,希望大家能喜欢. 1. Pop! 使用 Pop!可以创建简单的下拉菜单!这是一个并不引人注目的 jQuery 插件. 2. BetterTip ...

  3. jQuery 分页插件 jqPagination的使用

    jqPagination 是一个简单易用的轻量级 jQuery分页插件,其使用了 HTML5 和 CSS3 技术来实现.此插件提供了几个参数设置选项,通过简单的配置即可生成分页控件.此外,它的外观样式 ...

  4. 顶级jQuery树插件

    顶级jQuery树插件 顶级jQuery树插件 2013-03-05 17:20 139人阅读 评论(0) 收藏 举报 jsTree JsTree是一个基于jQuery的Tree控件.支持HTML.J ...

  5. 20个jQuery分页插件和教程

    1.客户端的jQuery 分页插件jPages jPages 是一个客户端的分页插件,但提供很多特性例如自动翻页.键盘和滚动浏览,延迟显示以及完全可定制的导航面板. Read More Demo 2. ...

  6. 轻量级jQuery语法高亮代码高亮插件jQuery Litelighter。

    <!DOCTYPE html><html><head><meta charset="UTF-8" /><title>jQ ...

  7. jquery轻量级数字动画插件jquery.countup.js

    插件描述: jquery.countup.js 是一款轻量级jquery数字动画插件.该数字动画插件可以在页面滚动时,将指定的数字从0开始计数增加动画. 插件说明 jquery.countup.js  ...

  8. jQuery国际化插件 jQuery.i18n.properties 【轻量级】

    jQuery.i18n.properties是一款轻量级的jQuery国际化插件,能实现Web前端的国际化. 国际化英文单词为:Internationalization,又称i18n,“i”为单词的第 ...

  9. jquery编写插件的方法

     版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2 ...

随机推荐

  1. oracle数据泵之解决方案(用户)导入导出。

    看到网上有这样的介绍而且很多,但觉得都是大神才能一下子看的懂.自己总结下菜鸟能看懂的. 1.导出. 首先第一步: 操作系统—开始—运行输入“cmd”进入dos界面输入“sqlplus/nolog”按回 ...

  2. 一些我后写出来的awk脚本

    mail.awk function mailByShell(receiver, sender, subject, content, __ARGVEND__, xhead, xfrom, xmime, ...

  3. cf C. Maze

    http://codeforces.com/problemset/problem/378/C #include <cstdio> #include <cstring> #inc ...

  4. COJ 0995 WZJ的数据结构(负五)区间操作

    WZJ的数据结构(负五) 难度级别:C: 运行时间限制:1000ms: 运行空间限制:262144KB: 代码长度限制:2000000B 试题描述 请你设计一个数据结构,完成以下功能: 给定一个大小为 ...

  5. Scala-循环

    package com.mengyao.scala.function /** * Scala中循环的声明和使用(while和for) *  * @author mengyao */object Tes ...

  6. Linux+eclipse+gdb调试postgresql源码

    pg内核源码解析课上用的vs调试pg源码, VS用起来确实方便,但是配置调试环境着实有点麻烦.首先得装个windows系统,最好是xp,win7稍微麻烦点:最好使用vs05,08和10也可以,但是比0 ...

  7. java中paint repaint update 之间的关系

    最近总结了一下java中的paint,repaint和updata三者之间的关系,首先咱们都知道用paint方法来绘图,用repaint重绘,用update来写双缓冲.但是他们之间是怎么来调用的呢,咱 ...

  8. linux ubuntu 浏览器 字 字体 虚 解决办法

    在刚装好的ubuntu上什么都好,只是浏览器字体很虚,就连百度都虚 解决办法很简单 安装雅黑字体 修改font conf sudo vi /etc/fonts/conf.avail/69-langua ...

  9. CSS3:优雅地绘制不规则ICON

    早上在w3ctech上看到 中国第二届CSS Conf总结  的时候,真是开心极了: 自从去年在慕课网上看了第一届CSS conf 视频之后,整个人都震惊了,原来还有大会是专门用来讨论CSS的,而且分 ...

  10. 解决html5新标签【placeholder】低版本浏览器下不兼容问题

    placeholder属性是HTML5 中为input添加的.在input上提供一个占位符,文字形式展示输入字段预期值的提示信息(hint),该字段会在输入为空时显示. 实例:1 <input ...