mootools - 悬停时保持事件状态的 float 提示

Question

我正在为我的项目使用 FloatingTip 工具提示，并且我正在努力解决如何在光标位于工具提示上时保持事件状态而不被关闭。
听到的是 jsFiddle [ http://jsfiddle.net/SLvUz/3/ ][1] 例如:当鼠标悬停到工具提示并锚定时，让我看看!工具提示保持打开状态。

详细链接:https://github.com/lorenzos/FloatingTips

有什么想法或建议吗？谢谢。

Answer 1

不幸的是，这个插件目前没有这样的选项，但它有方法和事件，所以你可以使用它们来实现这个行为。代码可能如下所示:

$$('#advanced a').each(function(elem){
    var instance = new FloatingTips(elem, {
        // example options
        content: function() { return $('htmlcontent'); },
        html: true,         // I want that content is interpreted as HTML
        center: false,      // I do not want to center the tooltip
        arrowOffset: 16,    // Arrow is a little more the the right
        offset: { x: -10 }, // Position offset {x, y}

        // override show/hide events
        showOn: null,
        hideOn: null
    });

    // customize tooltip behavior
    var delay = 100, timer;

    var tipHover = function() {
        clearTimeout(timer);
    }
    var tipLeave = function() {
        clearTimeout(timer);
        timer = setTimeout(function(){
            instance.hide(elem);    
        }, delay);
    }

    instance.addEvents({
        show: function(tip, elem){
            tip.addEvents({
                mouseover: tipHover,
                mouseout: tipLeave                    
            });
        },
        hide: function(tip, elem){
            tip.removeEvents({
                mouseover: tipHover,
                mouseout: tipLeave                    
            });   
        }
    });

    elem.addEvents({
        mouseover: function() {
            clearTimeout(timer);
            timer = setTimeout(function(){
                instance.show(elem);    
            }, delay);                
        },
        mouseout: function() {
            clearTimeout(timer);
            timer = setTimeout(function(){
                instance.hide(elem);    
            }, delay);  
        }
    });
});

在这里检查更新的 fiddle :http://jsfiddle.net/SLvUz/455/