jQuery插件之-Poshy Tip

 

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

Poshy Tip

插件拥有的参数：

view source

print ?

01	// default settings

02	$.fn.poshytip.defaults = {

03	content:       '[title]', // content to display ('[title]', 'string', element, function(updateCallback){...}, jQuery)

04	className:     'tip-yellow',  // class for the tips

05	bgImageFrameSize:   10,    // size in pixels for the background-image (if set in CSS) frame around the inner content of the tip

06	showTimeout:        500,       // timeout before showing the tip (in milliseconds 1000 == 1 second)

07	hideTimeout:        100,       // timeout before hiding the tip

08	showOn:        'hover',   // handler for showing the tip ('hover', 'focus', 'none') - use 'none' to trigger it manually

09	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

};

插件拥有的方法：

view source

print ?

01

show

02	.poshytip('show')//显示tooltip 。这里需要确保在触发事件前 alignTo 参数被设置为 'target'

03

hide

04	.poshytip('hide')//隐藏tooltip

05

disable

06	.poshytip('disable')//禁用tooltip

07

enable

08	.poshytip('enable')//启用tooltip

09

destroy

10	.poshytip('destroy') //解除tooltip功能

注意事项：
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属性来替换掉图片背景

如果想知道如何自己制作tooltip 的外观，可以查看官方的说明，地址：http://vadikom.com/tools/poshy-tip-jquery-plugin-for-stylish-tooltips/

官方DEMO地址：http://vadikom.com/demos/poshytip/
官方下载地址：http://vadikom.com/files/?file=poshytip/poshytip-1.0.zip
本地下载：poshytip-1.0

 

转载地址：http://www.xiaoningmeng.com/2010/08/jquery-plug-in-the-poshy-tip/