jQuery提示插件PoshyTip使用详解

Demo中提供了三种使用的例子，页面代码如下：

代码如下

复制代码

jQuery
1、基本使用：

代码如下	复制代码
$("#tip1").poshytip();

2、表单提示：当输入框获得焦点时，在右侧会出现提示工具条

代码如下	复制代码
$('#user').poshytip({ className: 'tip-yellowsimple', showOn: 'focus', alignTo: 'target', alignX: 'right', alignY: 'center', offsetX: 5 });

3、服务端调用：通过调用服务端ajax.php，获得返回数据

代码如下	复制代码
$('#remote').poshytip({ alignY: 'bottom', content: function(updateCallback) { $.get('ajax.php?id=1',function(msg){ updateCallback(msg); }); return 'Loading...'; } });

官网的一些效果介绍

Usage Examples

The default browser tooltip that displays the value of the title attribute is replaced with a "poshier" version:

Hover for a tooltip

View plain code

代码如下	复制代码
$('#demo-basic').poshytip();

Styles (Classes)

Using different tooltip classes is easy. Here are some examples that are included in the download package (in the "src" folder).

.tip-yellow

View plain code

代码如下	复制代码
$('#demo-tip-yellow').poshytip();

.tip-violet

View plain code

代码如下

复制代码

$('#demo-tip-violet').poshytip({ className: 'tip-violet', bgImageFrameSize: 9 });

.tip-darkgray

View plain code

代码如下	复制代码
$('#demo-tip-darkgray').poshytip({ className: 'tip-darkgray', bgImageFrameSize: 11, offsetX: -25 });

.tip-skyblue

View plain code

代码如下	复制代码
$('#demo-tip-skyblue').poshytip({ className: 'tip-skyblue', bgImageFrameSize: 9, offsetX: 0, offsetY: 20 });

.tip-yellowsimple (no background-image used for the tooltip body)

View plain code

代码如下	复制代码
$('#demo-tip-yellowsimple').poshytip({ className: 'tip-yellowsimple', showTimeout: 1, alignTo: 'target', alignX: 'center', offsetY: 5, allowTipHover: false });

.tip-twitter (ala Twitter)

View plain code

代码如下	复制代码
$('#demo-tip-twitter').poshytip({ className: 'tip-twitter', showTimeout: 1, alignTo: 'target', alignX: 'center', offsetY: 5, allowTipHover: false, fade: false, slide: false });

.tip-green

View plain code

代码如下	复制代码
$('#demo-tip-green').poshytip({ className: 'tip-green', offsetX: -7, offsetY: 16, allowTipHover: false });

Form Tooltips (with varying positioning)

Adding form input field tooltips is simple. You just have to make sure they are triggered on focus/blur (i.e. showOn: 'focus') and positioned relatively to the target element (i.e. alignTo: 'target'). The script also updates the position of such tooltips if the window is resized (e.g. show some of the tips below and resize your browser window for a demo).

Name:

View plain code

代码如下	复制代码
$('#demo-form-name').poshytip({ className: 'tip-yellowsimple', showOn: 'focus', alignTo: 'target', alignX: 'right', alignY: 'center', offsetX: 5, showTimeout: 100 });

Email:

View plain code

代码如下	复制代码
$('#demo-form-email').poshytip({ className: 'tip-yellowsimple', showOn: 'focus', alignTo: 'target', alignX: 'left', alignY: 'center', offsetX: 5, showTimeout: 100 });

Site:

View plain code

代码如下

复制代码

$('#demo-form-site').poshytip({ className: 'tip-yellowsimple', showOn: 'focus', alignTo: 'target', alignX: 'inner-left', offsetX: 0, offsetY: 5, showTimeout: 100 });

Subject:

代码如下	复制代码
$('#demo-form-subject').poshytip({ className: 'tip-yellowsimple', showOn: 'focus', alignTo: 'target', alignX: 'center', alignY: 'bottom', offsetX: 0, offsetY: 5, showTimeout: 100 });

Asynchronous Loading of the Content

Poshy Tip supports using a function for returning the tooltip content and the script also passes an update callback function as an argument to this function. By using this callback, you can easily update asynchronously the content of the tooltip after it has been displayed. The script also recalculates and updates the position of the tooltip when its content is updated.

Simple Example

Update content after 1 second

代码如下

复制代码

$('#demo-async-timeout').poshytip({
content: function(updateCallback) {
window.setTimeout(function() {
updateCallback('Tooltip content updated!'); }, 1000);
return 'Loading...'; } }
);

jQuery

提示插件PoshyTip下载地址:http://file.zzzyk.com/download/2013/05/20/poshytip-1.1.zip

补充：网页制作,jquery