jQuery工具提示插件Poshy Tip

 查看演示  website  立即下载

Poshy Tip 是一个强大的jQuery 工具提示插件，拥有不同的外观。作为 Form Tooltips使用时，可以自定义气泡出现的位置。 

特点

单一的背景图像,可扩展工具提示

假定您需要一个可扩展的工具提示，看起来像这样的代码 （即带有自动宽度/高度的工具提示根据里面的内容）：

title="poshytip_1.png" style="white-space: normal;"/>

常用的方法

为实现这一目标最类似插件那里您将需要为多个单独的图像-拐角的框中，为双方，切片图像等.：

title="poshytip_2.png"/>

Poshy 提示的方法

但是由于工具提示只工作无论如何启用 JavaScript 时，为什么不适用某些 JS 魔法，会使我们的生活更容易并将我们的服务器保存一些额外的请求呢？这正是 Poshy 提示是什么设计要做。与此插件，您可以只使用一个单一的背景图像为工具提示身体创建可扩展的工具提示：

title="poshytip_3.png"/>

您需要创建一个大图像工具提示正文-例如像 1024 x 768 像素 （这应该是足够为任何你可能想要里面的浏览器视区中的工具提示显示）。然后，您必须将其设置为背景图像的工具提示容器 DIV 最琐碎的方式：

.tip-yellow {
    ...
    background-image: url(tip-yellow.png);
}

Poshy 提示检测时的背景图像已为工具提示容器 DIV 设置和创建一个可扩展的框架，从它的包装内的提示内容。最后，你只需要指定什么应该是背景图像周围的框架的内部内容的大小，设置以下选项：

bgImageFrameSize: 10 // pixels

和的结果

title="poshytip_4.png"/>

如果需要，你当然可以，调整内部 DIV 的边距和填充。

先进的定位选项

Poshy 可以提示与鼠标光标或到目标元素的位置和方式水平和垂直方向对齐它们在每个可能的 （请注意，alignTo、 alignX和alignY选项）。另外，脚本可确保提示将始终显示在浏览器窗口和也会自动定位上的适当的工具提示身体边的箭头 （如果可用）。

工具提示内容异步加载

Poshy 提示支持使用函数用于返回工具提示内容，该脚本也将更新回调函数作为参数传递给此函数。通过使用此回调，您可以轻松地更新异步工具提示的内容后已显示。你可以看到一个简单的例子演示页

PREVIOUS:
NEXT:
CSS3和jQuery的3D画廊
jQuery提示插件 qTip