参数设置

参数 默认值 类型 描述
template undefined String tip 层 模版 ，可以是 String 常量，也可以是 script 标签的id(#abcd),className(不推荐)，其他选择器
content null String,Function 当值设定为 String 时，则清空 [ data-tooltip="content" ] 内容区，并插入当前值， 当值设定为 Function 时，实现动态插入，调用this.insertContent() 
        
content:function(){
        var cnt = ' 1234';
        var fn = this;
          setTimeout(function(){
              fn.insertContent(cnt);
          },2000)
        }
loading null String,Boolean 当值设定为true 时，实现动态加载，并在内容区设定 [ data-tooltip="content" ]，和参数 'content'相互关联。 默认loading模版：

loading....

当值设定为 String 时，则覆盖默认的loading模版
trigger 'hover' String 可选参数：‘click’
selector false Boolean selector 不等于false时，实现动态绑定： // 动态 $(elem).tooltip({ selecotr:'.XXXX' }) //方法原理： $(elem).on(event,selector,function(){ // elem 静态元素 // selector 动态元素 })
visible false Boolean 当值设定为 true 时，鼠标能在tip层上停留，和参数 'trigger'相互关联
timeout 0 Number 不可用
zIndex 1990 Number 设定tip层的z-index 值
position 'auto' String 和参数 'center'相互关联，参考[方向说明](#pic_1)图
center false Boolean 和参数 'position'相互关联，参考[方向说明](#pic_1)图
appendTo 'body' String 可选参数：‘after’，设置tip dom 元素追加到 body 或者 目标元素之后
offset 30 Number tip偏移微调，校正箭头对准目标元素
arrowSize 6 Number 箭头的宽度或者高度，当箭头绝对定位于在tip 层外面（代码），不适用于最外层包裹（padding）
close false Boolean 关闭按钮，事件绑定[ data-tooltip="close" ]
callback function(){} Function 回调函数

默认参数

       
     // 默认参数
    $.tooltip.defaults = {
      template: undefined,
      content: null,
      loading:null,
      trigger:'hover', // hover click
      selector:false,
      visible:false, // when  the mouse leave the target , over the tips ,tips is visible ?
      timeout: 0,
      zIndex: 1990,
      position:"auto",  // auto left top right bottom
      appendTo:'body',
      offset:30,
      arrowSize:6,
      close: false, // close btn
      center:false,
      callback: function() {}
    };

定位说明

方向说明

参考实例

示例1 


            $('.dynamic_demo1').tooltip({
              template:itourstyle,
              offset:40,
              visible:true
            });
            // 屏幕缩放 位置只适应
示例2 
            $('.dynamic_demo2').tooltip({
              template: vancltempl,
              offset:40,
              visible:true,
              position:'bottomRight'
            });
示例3 
            $('.dynamic_demo3').tooltip({
              template:Qzonestyle,
              offset:40,
              visible:true,
              position:'rightBottom'
            });
示例4 
            $('.dynamic_demo4').tooltip({
              template:Qzonestyle,
              offset:40,
              visible:true,
              position:'bottomLeft'
            });
示例5 
            $('.dynamic_demo5').tooltip({
              template:douban,
              offset:28,
              visible:true,
              position:'rightBottom'
            });
惠州龙门南昆山温泉大观园
示例6 
            $('.dynamic_demo6').tooltip({
              template:hotelstyle,
              offset:40,
              visible:true,
              position:'topLeft',
              appendTo:'after'
            });
示例7 
            $('.dynamic_demo7').tooltip({
              template:vancltempl,
              offset:30,
              position:'leftTop'
            });
示例8 
            $('.dynamic_demo8').tooltip({
              template:vancltempl,
              offset:30,
              position:'topRight'
            });
示例9 
              $('.dynamic_demo9').tooltip({
                template:vancltempl,
                offset:30,
                position:'rightTop'
              });
示例10：异步加载 
           // 显示 loading 
           // 并异步加载（ajax 请求）
           // data-tooltip="content"  
           // 属性为内容区 (必须)。

          var douban2 = '
';

            $('.dynamic_demo10').tooltip({
              template:douban2,
              offset:30,
              loading:true,
              visible:true,
              position:'rightBottom',
              content:function(){

                var cnt = '<h2>荒潮
陈楸帆 / 2013-1 / 长江文艺出版社 / 24.80元 / 平装
如果并非只有人类拥有灵魂？如果并非只有生物才能进化？如果我们的未来必须穿过地狱之门？进步浪潮席卷之处，人的灵魂一片荒芜。故事发生在近未来的硅屿——一座被进步浪潮抛弃的垃圾之岛，对生态灾难习以为常的麻木岛民迎来了不可预知的变化：宣称要用环保技术造福硅屿的外来资本精英；在底层苦苦挣扎沉湎于电子毒品的垃圾少女；为拯救受未知病毒感染的爱子而不惜代...
';

                var fn = this;
                setTimeout(function(){


                  fn.insertContent(cnt); 
                  // 异步 否则直接 return
                },2000)
              }
示例11
示例12

动态加载

      selector：false;// 默认值
      $(elem).tooltip({ // 默认 非动态

      })
      $(elem).on(event,function(){ // elem 静态元素
      })
      // 动态
      $(elem).tooltip({ 
        selecotr:'.XXXX'
      })
      //方法原理：
      $(elem).on(event,selector,function(){ // elem 静态元素
      // selector 动态元素
      })