Poshy Tip 基于 jQuery 时尚的工具提示插件 - 资源分享

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

发布于 2017-12-03 字数 2757 浏览 1881 评论 0

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

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

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

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

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

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

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

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

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

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

bgImageFrameSize: 10 // pixels

最终得到的结果

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

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

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

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

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

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

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

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

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

2583 文章
29 评论
84935 人气
更多

推荐作者

佚名

文章 0 评论 0

文江

文章 0 评论 0

2012013325

文章 0 评论 0

女中豪杰

文章 2 评论 0