Question

我在tuts之后创建了一个简单的插件，并修改它以做我想要的。它基本上创建了一个“工具提示”，我试图在一段时间内保持可见状态，但也允许用户点击块以便通知而不是工具提示。到目前为止我所拥有的是在下面，但是当它没有自动隐藏时......然而，点击关闭工作。谁能发现我做错了什么/改进？

$.fn.betterTooltip = function(options){

    /* Setup the options for the tooltip that can be 
       accessed from outside the plugin              */
    var defaults = {
        speed: 200,
        delay: 300,
        hideAfter:5000
    };

    var options = $.extend(defaults, options);

    /* Create a function that builds the tooltip 
       markup. Then, prepend the tooltip to the body */
    getTip = function() {
        var tTip = 
        "<div class='tip'>" +
        "<div class='tipMid'>"  +
        "</div>" +
        "<div class='tipBtm'></div>" +
        "</div>";
        return tTip;
    }
    $("body").prepend(getTip());

    /* Give each item with the class associated with 
       the plugin the ability to call the tooltip    */
    $(this).each(function(){

        var $this = $(this);
        var tip = $('.tip');
        var tipInner = $('.tip .tipMid');

        var tTitle = (this.title);
        this.title = "";

        var offset = $(this).offset();
        var tLeft = offset.left;
        var tTop = offset.top;
        var tWidth = $this.width();
        var tHeight = $this.height();

        /* Delay the fade-in animation of the tooltip */
        setTimer = function() {
            $this.showTipTimer = setInterval("showTip()", defaults.delay);
        }
        hideTip=function(){
            stopTimer();
            tip.hide();
        }
        stopTimer = function() {
            clearInterval($this.showTipTimer);
            clearInterval( $this.hideTimer);
        }

        /* Position the tooltip relative to the class 
           associated with the tooltip                */
        setTip = function(top, left){
            var topOffset = tip.height()-30;
            var xTip = (left+60)+"px";
            var yTip = (top-topOffset)+"px";
            tip.css({
                'top' : yTip, 
                'left' : xTip
            });
        }

        /* This function stops the timer and creates the
           fade-in animation                          */
        showTip = function(){
            stopTimer();
            tip.animate({
                "top": "+=20px", 
                "opacity": "toggle"
            }, defaults.speed);
        }
        $(this).ready(function() {
            tipInner.html(tTitle+'<br />(Click to dismiss)');
            setTip(tTop, tLeft);
            setTimer();
            hideTimer=function(){
                $this.hideTimer=setInterval("hideTip()",defaults.hideAfter);
            }
            hideTimer();
        });
        $(tip).click(function() {
                hideTip();
        }); 
    });
};

Answer 1

我认为您需要setTimeout和clearTimeout而不是...Interval版本。前者一次发起回调，而后者反复发作。

一些提示：

不要将字符串传递给setTimeout或setInterval以使代码运行 - 使用函数指针。我发现它不容易出错，并且范围从来都不是问题。
隐藏mouseleave事件的提示（来自提示所针对的项目或提示本身），并在mouseover或mouseenter上显示。这比让javascript一直运行更有效。

自定义Jquery插件bug

1 个答案: