jQuery Tooltip工具提示插件

这是一款jQuery Tooltip工具提示插件。jTippy工具提示插件简单灵活，提供多种触发tooltip的方式，并提供丰富的操作api和参数，非常实用。

jTippy工具提示插件的特点还有：

• 提供多种触发tooltip的方式：click, hover, focus, hoverfocus。
• 点击触发时，提供三种类型的遮罩层效果：合适、白色和模糊效果。
• 提供多种tooltip的主题：black, lt-gray, white, blue, green, red。
• 提供tooltip线索和隐藏的回调函数。

使用方法

在页面中引入jquery和jTippy.min.js文件，以及jTippy.min.css文件。

<link rel="stylesheet" href="jTippy-master/jTippy.min.css">                  
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jTippy.min..js"></script>                  
                

HTML结构

最简单的使用方法如下，为一个超链接元素添加title属性，这个属性就是要显示的tooltip的内容：

<a href='#' 
    data-toggle="tooltip"
    title="提示的内容">
    超链接
</a>
                

初始化插件

在页面DOM元素加载完毕之后，通过下面的方法来初始化该jQueryTooltip工具提示插件。

$(function(){
  $('[data-toggle="tooltip"]').jTippy();
});
                

配置参数

$(function(){
  $('[data-toggle="tooltip"]').jTippy({
        //string: overridden by the title attribute
        title: '',
        //string ('click', 'hover', 'focus', 'hoverfocus'): defines when the tooltip should be shown
        trigger: 'hoverfocus',
        //string ('auto','top','bottom','left','right'): preferred location of the tooltip (defaults to auto if no space)
        position: 'auto',
        //string ('black', 'lt-gray', 'white', 'blue', 'green', 'red')
        theme: 'black',
        //string ('tiny', 'small', 'medium', 'large')
        size: 'small',
        //string|false ('black', 'white', 'blurred'): Only works with trigger: "click"
        backdrop: false,
        //string: class(es) to add to the tooltip
        class: '',
        //boolean: if true, when this tooltip is triggered, all others will hide
        singleton: true,
        //boolean: if true and trigger: 'click', when clicking outside the tooltip, it will be hidden
        close_on_outside_click: true,
  }).on('jt-show', function(e, tooltip){
      //triggered on show of tooltip
      //tooltip dom element is passed as the second parameter
  }).on('jt-hide', function(e){
      //triggered on hide of tooltip
  });
});
                

可以通过下面的语法来设置参数。

$.jTippy.defaults.backdrop = false;
$.jTippy.defaults.theme = 'black';
$.jTippy.defaults.trigger = 'hoverfocus';
                

也可以通过在html上添加data-*属性来设置参数。

<a href='#' 
    data-toggle="tooltip"
    data-backdrop="black"
    data-trigger="click">
    Black backdrop!
</a>
                

该jQuery Tooltip工具提示插件的github网址为：https://github.com/HTMLGuyLLC/jTippy