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

Poshy Tip

插件拥有的参数:

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

  注意事项:
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. install xdebug on fedora

    Compiling There is a wizard available that provides you with the correct file to download, and which ...

  2. memcached全面剖析--4

    memcached的分布式算法   memcached的分布式 正如第1次中介绍的那样, memcached虽然称为“分布式”缓存服务器,但服务器端并没有“分布式”功能. 服务器端仅包括 第2次. 第 ...

  3. WPF MVVM 中怎样在ViewModel总打开的对话框在窗体之前

    今天在WPF的项目中,写打印插件,在ViewModel中对需要弹出打印对话框,而对话框如果没有Owner所属的时候经常会被当前应用程序遮住,导致我都不知道到底弹出来没有! 参照:http://www. ...

  4. PHP学习心得(九)——函数

    一个函数可由以下的语法来定义.任何有效的 PHP 代码都有可能出现在函数内部,甚至包括其它函数和类定义. 函数名和 PHP 中的其它标识符命名规则相同.有效的函数名以字母或下划线打头,后面跟字母,数字 ...

  5. laravel homestead

    laravel homestead真是个好东西啊,折腾了很长时间,终于ok啦. 安装成功之后,在-目录下有个homstead,进入执行vagrant up clzdeMBP:Homestead clz ...

  6. centos 挂载与卸载硬盘

    fdisk -l //先查询未挂载的硬盘名如:sdb1 等 mkfs.ext3 /dev/xvdb 开始格式化 df -h mount /dev/xvdb /home 开始挂载 vi /etc/fst ...

  7. 走进WCF一 (异常如此多娇,引无数码农竞折煞)

    对于WCF一直都是只知其然,公司框架的架构者也只是对我们授之以鱼,而不授之以渔. 带着初学者的态度进入了大神Artech的博客,逐步慢慢上手. 我的解决方案(和大神的一模一样,只是过程中一波三折的) ...

  8. Java单实例的最佳写法

    前言:代码简洁与性能高效无法两全其美,本文章专注于大并发程序的性能,如果您追求代码简洁,本文章可能不太适合,因为本文章主要讨论如何写出在高并发下也能运行很好的代码. 并文章属于Java并发编程实战中例 ...

  9. 在JSP中使用BootStrap

    1. 下载BootStrap,然后再Jsp标签中添加如下标签: <html> <head lang="zh-cn"> <meta charset=&q ...

  10. php的curl获取https加密协议请求返回json数据进行信息获取

    <?php header("Content-type:text/html; charset=utf-8");function getToken($url){        $ ...