Layer中的 tips跟随元素提示是一个不错的功能,但是自动消失的接口并不完美, 如果内容中有 a链接,或者 Button按钮需要点击操作,需要额外的代码开发。

Layer Tips悬浮提示1

打开新的标签页

Layer Tips悬浮提示2

打开新的标签页

var layer_index, timer_tips;
$('body').on('mouseenter', '.apw-demo', function (e) {
    e.stopPropagation();
    e.preventDefault();
    var target = $(e.currentTarget);

    if (timer_tips){
        clearTimeout(timer_tips);
        timer_tips = null;
        if (target.data('tips_index') == layer_index){
            return;
        }
    }

    var width = $(this).data('width');
    if (!width){
        width = '380px';
    }

    var option = {
        tips: [1, '#3595CC'],
        area: [width, 'auto'],
        time: 0,
        skin: 'apw-tips'
    };

    var id = $(this).data('id');
    if (!id){
        return;
    }
    layer_index = layer.tips($('#'+id).html(), $(this).get(0), option);
    target.data('tips_index', layer_index);
}).on('mouseleave', '.apw-demo', function (e) {
    if (layer_index) {
        timer_tips = setTimeout(function () {
            layer.close(layer_index);

            timer_tips = null;
            layer_index = null;
        }, 600);
    }
});

$('body').on('mouseenter', '.apw-tips', function (e) {
    if (timer_tips){
        clearTimeout(timer_tips);
        timer_tips = null;
    }
}).on('mouseleave', '.apw-tips', function (e) {
    if (layer_index){
        timer_tips = setTimeout(function () {
            layer.close(layer_index);

            timer_tips = null;
            layer_index = null;
        }, 600);
    }
});