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