jQuery插件Poshy Tip是一个强大的jQuery Tooltips插件,它有多种不同的外观。同时可以作为 Form Tooltips使用,并且可以自定义气泡出现的位置。在处理表单验证提示上能带来更好的浏览体验,已经减少自己编写的代码量。
先来个截图:
插件拥有的参数:
// 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属性来替换掉图片背景