Poshy Tip 基于 jQuery 时尚的工具提示插件

Question

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

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

为了实现这样的效果，你可能需要使用九宫格的图片，例如拐角处单独是一张图片

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

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

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

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

bgImageFrameSize: 10 // pixels

最终得到的结果

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

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

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

项目地址：http://vadikom.com/tools/poshy-tip-jquery-plugin-for-stylish-tooltips/