jQuery插件Poshy Tip是一个强大的jQuery Tooltips插件,它有多种不同的外观。同时可以作为 Form Tooltips使用,并且可以自定义气泡出现的位置。在处理表单验证提示上能带来更好的浏览体验,已经减少自己编写的代码量。
先来个截图:

Poshy Tip

插件拥有的参数:

  1. // default settings
  2. $.fn.poshytip.defaults = {
  3. content: '[title]', // content to display ('[title]', 'string', element, function(updateCallback){...}, jQuery)
  4. className: 'tip-yellow', // class for the tips
  5. bgImageFrameSize: 10, // size in pixels for the background-image (if set in CSS) frame around the inner content of the tip
  6. showTimeout: 500, // timeout before showing the tip (in milliseconds 1000 == 1 second)
  7. hideTimeout: 100, // timeout before hiding the tip
  8. showOn: 'hover', // handler for showing the tip ('hover', 'focus', 'none') - use 'none' to trigger it manually
  9. alignTo: 'cursor', // align/position the tip relative to ('cursor', 'target')
  10. alignX: 'right', // horizontal alignment for the tip relative to the mouse cursor or the target element
  11. // ('right', 'center', 'left', 'inner-left', 'inner-right') - 'inner-*' matter if alignTo:'target'
  12. alignY: 'top', // vertical alignment for the tip relative to the mouse cursor or the target element
  13. // ('bottom', 'center', 'top', 'inner-bottom', 'inner-top') - 'inner-*' matter if alignTo:'target'
  14. offsetX: -22, // offset X pixels from the default position - doesn't matter if alignX:'center'
  15. offsetY: 18, // offset Y pixels from the default position - doesn't matter if alignY:'center'
  16. allowTipHover: true, // allow hovering the tip without hiding it onmouseout of the target - matters only if showOn:'hover'
  17. followCursor: false, // if the tip should follow the cursor - matters only if showOn:'hover' and alignTo:'cursor'
  18. fade: true, // use fade animation
  19. slide: true, // use slide animation
  20. slideOffset: 8, // slide animation offset
  21. showAniDuration: 300, // show animation duration - set to 0 if you don't want show animation
  22. hideAniDuration: 300 // hide animation duration - set to 0 if you don't want hide animation
  23. };

  注意事项:
jQuery版本要求1.4+
插件兼容 IE6+, FF 2+, Opera 9+, Safari 3+, Chrome
tooltip 的DIV容器支持在IE6中使用min/max-width(只限于px像素值),可以不用特意为IE6做hack
当使用图片来作为容器背景的时候,脚本将自动忽略background-color/padding/border属性的设置,并围绕背景图片创建tooltip 容器
PNG背景图片在IE6中不被支持(只有GIF支持),如果将一个PNG图片设为背景图片,在IE6中将自动用background-color/padding/border属性来替换掉图片背景

jQuery插件之-Poshy Tip的更多相关文章

  1. jQuery Plugin Poshy Tip 使用 统一提示信息

    项目到了后期,发现前端的提示信息不统一,解决思路如下: 1.回顾系统中tip出现的场景:表单验证提示信息.数据列表中随填随显 2.确定问题域:多条提示信息层叠.信息显示风格不统一 3.结论:找出一款合 ...

  2. 自己动手写jQuery插件---Tip(提示框)

    对jQuery相信很多同学和我一样平时都是拿来主义,没办法,要怪只能怪jQuery太火了,各种插件基本能满足平时的要求.但是这毕竟不是长久之道,古人云:“授之以鱼,不如授之以渔”. 为了方便之前没有接 ...

  3. jquery插件之poshytip

    Poshy Tip 是一个强大的jQuery 工具提示插件,拥有不同的外观.作为 Form Tooltips使用时,可以自定义气泡出现的位置. 导入插件: <script type=" ...

  4. 50个jQuery插件可将你的网站带到另一个高度

    Web领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展.在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好 ...

  5. 常用Jquery插件整理

    虽然自己也写过插件,但JQuery插件种类的繁多,大多时候,我还是使用别人写好的插件,这些都是我用了同类插件里较为不错的一些,今天就整理一下公开放出来. UI: jquery.HooRay(哈哈,自己 ...

  6. jquery插件库

    jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team. jQuery是继prototype之后又一个优秀的Javascrīpt框架.其经典 ...

  7. 常用JQuery插件

    虽然自己也写过插件,但JQuery插件种类的繁多,大多时候,我还是使用别人写好的插件,这些都是我用了同类插件里较为不错的一些,今天就整理一下公开放出来. UI: jquery.HooRay(哈哈,自己 ...

  8. 全屏滚动-jQuery插件实现

    全屏滚动 <---很久没写了,这段忙了点,以后还是每周尽量写点东西---> 在很多情况下,我们需要页面的全屏滚动,尤其是移动端.今天简要的介绍一下全屏滚动的知识. 一.全屏滚动的原理 1. ...

  9. 强烈推荐240多个jQuery插件提供下载

    jQuery 是继 prototype 之后又一个优秀的 Javascript 框架.其宗旨是—写更少的代码,做更多的事情.它是轻量级的 js 库(压缩后只有21k) ,这是其它的 js 库所不及 的 ...

随机推荐

  1. 责任链模式(Chain of Responsibility Pattern)

    责任链模式:可以为某个请求创建一个对象链.每个对象依序检查此请求,并对其处理,或者把它传给链中的下一个对象. 责任链上的对象负责处理请求,客户只需要将请求发送到责任链上即可,无需关心处理的细节和请求的 ...

  2. 24种设计模式--访问者模式【Visitor Pattern】

    今天天气不错,绝对是晴空万里,骄阳似火呀,好,我们今天来讲访问者模式,我们在前面讲了组合模式和迭代器模式,通过组合模式我们能够把一个公司的人员组织机构树搭建起来,给管理带来非常大的便利,通过迭代器模式 ...

  3. HTML5的离线储存

    在用户没有与因特网连接时,可以正常访问站点或应用,在用户与因特网连接时,更新用户机器上的缓存文件.        原理:HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技 ...

  4. Keil 4 与Proteus 7.8联调

    实验环境: windows 8.1 pro with Keil 4 and Proteus 7.8 both cracked. 步骤: 下载联调工具Vdmagdi,安装. keil下Option/De ...

  5. json 筛选数据 $.grep过滤数据

    var data = { status: "ok", image_size_list: [ { image_size_id: "22", ad_class: & ...

  6. sprintf函数php的详细使用方法

    PHP sprintf() 函数 先说下为什么要写这个函数的前言,这个是我在微信二次开发的一个token验证文档也就是示例文档看到的一个函数,当时非常不理解,于是查了百度,但是很多结果都很笼统,结果也 ...

  7. jquery垂直公告滚动实现代码

    公告滚动想必大家都有见到过吧,实现方法也有很多,下面为大家介绍使用jquery实现垂直公告滚动,感兴趣的朋友不要错过 复制代码代码如下: <!DOCTYPE html PUBLIC " ...

  8. tableView -- tips

    1. 如果发现TableView的第一个sectionHeader不显示, 那么可以断定, 你没有用代理方法来设置 sectionHeader的高度! #pragma mark - delegate ...

  9. bug - colorWithPatternImage:

    // 在ios5之前, 再通过以下方法设置背景时, 有闪屏bug self.view.backgroundColor = [UIColor colorWithPatternImage:<#(no ...

  10. jersey post提交到 ContainerRequestFilter 而HttpServletRequest获取不到数据(转)

     jersey post提交到 ContainerRequestFilter 而HttpServletRequest获取不到数据 问题:在serverfilter request获取不到post提交的 ...