layer.tips使用

用layer.tips实现划过显示，划出隐藏效果

layer-tips使用

1、引入文件 layer.css 、 layer.js
2、参数介绍：
layer.tips(content, follow, options) - tips层
{
content:tooltip内容可以是str，也可以是html代码
follow:依附的元素，一般用id表示
如果依附的元素是自己直接用this即可，如果是在其他元素的事件（比如点击）里面，记得更改this指向。
options:tips的配置型[tips位置：1上；2右；3下；4左,字体的颜色]
}
这3个是必填参数，也同时具有layer的其他基础参数，比如time（是否定时关闭），area（设置框的宽高），shadeClose（是否点击遮罩层关闭）等。

3、代码示例：

layer.tips(msg, '#id',{tips: 1}，time:10000)

如果我们不想定时关闭，而是划过显示，划出隐藏的效果，可以配合mouseenter、mouseleave事件即可，此时的time值为0，比如

    

        你喜欢的人：
        
        
    
    
    
    

效果如图：（只是箭头的位置暂时还不知道怎么自定义）

4、一个页面有多个tips
记得换触发事件的元素、依附的元素、tips定义一次即可。比如：

var tips;
$('i.drug-tooltip-icon1').on({
       mouseenter:function(){
           tips =layer.tips("我喜欢阿毛","#id1",{tips:[3,'#ddd'],time:0,area: 'auto',maxWidth:500,tipsMore:true});
       },
       mouseleave:function(){
           layer.close(tips);
       }
   });
   $('i.drug-tooltip-icon2').on({
       mouseenter:function(){
           tips =layer.tips("我喜欢阿怪","#id2",{tips:[3,'#ddd'],time:0,area: 'auto',maxWidth:500,tipsMore:true});
       },
       mouseleave:function(){
           layer.close(tips);
       }
   });