新一代jQuery工具提示插件
Posted
tags:
中文标题：新一代jQuery工具提示插件 原文标题：A new generation jQuery Tooltip plugin 项目评级：Star:362 Fork:36 下载地址：https://github.com/wintercounter/Protip 详情介绍功能简介
介绍
在我工作的公司，我们使用许多工具提示有多种用途。特别是我们的管理区域/控制面板一侧有大量的工具提示使用。有几个不寻常的请求总是需要在我们现有的插件中开发新的功能。现在我已经创建了新一代工具提示Protip。它不是那么轻，但它并不打算这么轻。我们需要一个适合我们面临的每一种情况的解决方案。
安装
简单的方法
在<head>标签中包含protip.min.css文件：
在关闭</body>标签之前（但在包含jQuery之后）包含protip.min.js文件：
使用npm获取文件
npm install protip --save
使用bower获取文件
bower install protip
初始化插件
要初始化插件，只需在$(document).ready();部分插入$.protip();，以防您已经有了。
如果没有，则创建一个：
您也可以在此处传递配置对象：$.protip([configObject]);
用法
配置
您可能需要对工具提示的行为进行一些全局配置。您可以在初始化时作为对象传递一些配置选项。
<表格>
属性 默认 详细信息
data-pt-*属性将工具提示附着到图元
工具提示由数据属性控制。说真的，你可以从标记中控制工具提示的各个方面，不需要额外的JavaScript代码。
我在这里所做的是在元素中添加一个protip类，然后在data-pt-title属性中定义一个工具提示文本。
与Protip相关的属性将始终获得一个pt命名空间，这样Protip就不会与现有的数据属性发生冲突。
可用属性[data pt-*]
<表格>
属性 默认 类型 详细信息
<div id="tooltipContent"><em>This is my tooltips content</em></div>。您也可以使用:next、:prev或:this，这可以让您立即获得下一个、上一个或这个元素的内容元素的nside。可用的值有：外部、内部、边界和中心
jQuery帮助程序
实例
重力
可用职位列表
数据点重力
正确/错误
它将启用/禁用重力选项。如果这是真的，普罗提普会尝试所有的位置。
三级职位
级别1顶部、右侧、底部、左侧
标高2除转角外的所有其他
Level 3偶数拐角
您可以定义一个级别编号。如果您希望仅在最常见的位置使用重力，请设置为1。2将同时触发1和23将触发所有这些。
全手动控制
有时，您可能需要特定的工具提示，以便在所有位置中只有3或5个具有自定义偏移的位置。有一个用于此目的的自定义标记：
只能使用2个位置。
data-pt-gravity="top-right; bottom-left"
只能使用2个位置。带有自定义偏移。（X，Y）
data-pt-gravity="top-right 10; bottom-left -10 30"
优先考虑这些职位，然后其他职位可能会来。。。
data-pt-gravity="top-right; bottom-left; ..."
根据需要混合：）
数据点放置
使用放置属性可以更改工具提示的定位行为。
请注意，对于outside以外的其他位置，您可能需要禁用箭头。
动画
Protip内置了对Animate.css的支持(https://daneden.github.io/animate.css/).
您只需使用链接网站上的相同名称即可。
用法：
Protip的CSS不包括Animate.CSS。从这里下载：//min.gitcdn.xyz/repo/daneden/Animate.CSS/master/Animate.CSS
皮肤
皮肤现在有点难，我期待着采用一种更清洁的方式。
无论如何，标记不会发生太大的变化，所以目前制作的皮肤在未来也应该可以使用。
请查看Protip的SCSS文件以了解更多详细信息。存在可配置的映射，
这样你就可以很容易地添加你自己的风格（还有方案和尺寸）。
可用方案列表
很高兴知道一些事情
.protip目标类
如果没有指定data-pt-title，Protip将尝试在家长中搜索.protip-target的班级。
如果找到，工具提示将被附加到那里，否则它将直接附加到body中（如果没有指定其他内容）。
例如，当在覆盖中使用工具提示时，这很有用。将protip-target类添加到覆盖容器元素
这将解决关闭覆盖时z-index的问题和工具提示删除。
.protip开放类
打开工具提示时，Protip会将protip-open类添加到元素中，以使您能够添加自定义样式，例如。
.protip闭合类
如果您需要一个元素来关闭工具提示（在工具提示中，如X之类），只需添加一个元素
与碎屑
sprotip-close，点击会触发关闭。
自动交互式链接检测
Protip将尝试检测您的工具提示是否包含链接（通过在其中搜索a标签）。如果真的找到了，你的
工具提示将自动变成交互式的，这样用户就可以单击工具提示中的链接，而不是关闭它。
为什么偏移（顶部/左侧）不起作用？
data-pt-offset-(left/top)属性仅对默认位置工具提示有效。如果重新定位
根据重力，它不会被添加到计算中。如果需要定位重新定位的工具提示，请在
data-pt-gravity标签使用自己的语法。
data-pt-gravity="top 0 -15; bottom 0 15"
命令缓冲区
您可以在初始化protip之前调用jQuery助手（如protipShow/protipHide）。这解决了JavaScript文件顺序的问题
和在Protip初始化之前调用，您的命令将在所有操作完成后运行。
突变观察员（IE8-10支持）
Internet Explorer仅从版本11开始支持突变观察者。如果您需要IE8-10支持，则需要包含
突变观察者Polyfill。只需在加载Protip之前包含此脚本https://github.com/megawac/MutationObserver.js
贡献、错误、功能请求和建议
捐款总是受欢迎的。只需分叉存储库，提交您的更改并创建一个Pull Request。
对于bug、请求、建议等，请使用Protip存储库中的GitHub问题跟踪器。
信用
书签
将此自定义 JQuery 工具提示脚本转换为 Jquery 插件
如何在 Tooltipster 工具提示中显示来自 jQuery Validate 插件的消息？