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

发布于 2017-12-03 19:36:24 字数 2099 浏览 2008 评论 0

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/

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

遥远的她

文章 0 评论 0

情深如许

文章 0 评论 0

18120987591

文章 0 评论 0

女皇必胜

文章 0 评论 0

13002228876

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。