Protip | 功能强大的jQuery Tooltip插件

Protip是一款功能强大的jQuery Tooltip插件。它提供众多的参数和方法来控制Tooltip，可以在49个位置上显示Tooltip，并且可以和animate.css配合制作各种Tooltip过渡动画效果。它的特点还有：

• 支持在元素的49个位置显示Tooltip。
• 可以实时更新Tooltip的选项。
• 可以实时检测元素（元素被删除，该元素的Tooltip将被禁用）
• 重力效应：自动Tooltip在屏幕中的位置（如果屏幕不足以容纳Tooltip）
• 目标DOM元素：Tooltip会被添加到根元素或另一个目标元素中。
• Tooltip可以位于元素的外部，内部，边框或中间位置。
• Tooltip可以是固定的，也可以点击触发或鼠标滑过触发。
• Tooltip内容可以自定义。
• 可以配置动画延迟时间。
• 可以自动隐藏。
• 支持图标。
• 多种皮肤，尺寸和配色方案。
• 支持多种动画过渡效果。
• 可以自定义事件回调函数。

使用方法

使用该Tooltip插件需要引入protip.min.css和jQuery，protip.min.js文件。

<link rel="stylesheet" href="css/protip.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/protip.min.js"></script>                
              

初始化插件

在页面DOM元素加载完毕之后，可以通过$.protip();方法来初始化该Tooltip插件。

$(document).ready(function(){
    $.protip();
});               
              

或者在初始化的时候传入一些配置参数。

$.protip({
    /** @type String    Selector for protips */
    selector:           C.DEFAULT_SELECTOR,
    /** @type String    Namespace of the data attributes */
    namespace:          C.DEFAULT_NAMESPACE,
    /** @type String    Template of protip element */
    protipTemplate:     C.TEMPLATE_PROTIP,
    /** @type String    Template of the arrow element */
    arrowTemplate:      C.TEMPLATE_ARROW,
    /** @type String    Template of protip icon */
    iconTemplate:       C.TEMPLATE_ICON,
    /** @type Boolean   Should we observe whole document for assertions and removals */
    observer:           true,
    /** @type String    Default skin to use */
    skin:               C.SKIN_DEFAULT,
    /** @type String    Default size to use (provided by the Default skin only) */
    size:               C.SIZE_DEFAULT,
    /** @type String    Default color scheme to use (provided by the Default skin only) */
    scheme:             C.SCHEME_DEFAULT,
    /** @type Boolean   Global animation? */
    animate:            false
});                
              

配置参数

Data属性

为元素附加Tooltip

可以通过元素的Data属性来添加Tooltips。通过data属性你可以进行所有属性的控制，下面是一个简单的例子：

<a href="#bar" class="protip" data-pt-title="You must be at least 18!">
    Go to the bar!
</a>                
              

元素上添加了一个protip class，然后在data-pt-title中的内容就是提示的内容。

可用的[data-pt-*]属性

jQuery Helpers

var el = $('.el');

// Set tooltip to the element.
el.protipSet([options]);

// Show the tooltip of this element. Same as set, but it won't show.
el.protipShow([options]);

// Hide the tooltip of this element.
el.protipHide();

// Toggle the tooltip of this element.
el.protipToggle();

// Hide all tooltips inside of this element.
el.protipHideInside();

// Show all tooltips inside of this element.
el.protipShowInside();

// Toggle all tooltips inside of this element.
el.protipToggleInside();

// Custom show event
el.on('protipshow', function(ItemInstance){});

// Custom hide event
el.on('protiphide', function(ItemInstance){});

// Use console.log(ItemInstance) in the callback to check what options you have.                
              

示例

<div class="my-el protip" data-pt-title="My element"></div>                
              

var el = $('.my-el');

// Shows tooltip with title: "My element"
el.protipShow();

// Shows tooltip with title: "My new title"
el.protipShow({
    title: 'My new title'
});

// Changed trigger from hover to click
el.protipSet({
    trigger: 'click'
});

// Changed trigger from hover to click and also show it
el.protipShow({
    trigger: 'click'
});                
              

Gravity

Tooltip可用的位置有：

• corner-left-top
• top-left
• top
• top-right
• corner-right-top
• right-top
• right
• right-bottom
• bottom-left
• bottom
• bottom-right
• corner-right-bottom
• left-top
• left
• left-bottom
• corner-left-bottom

关于该插件更多的信息请参考：https://github.com/DoclerLabs/Protip