Javascript 工具提示悬停并单击

Question

我需要一些有关 JavaScript 工具提示的帮助。我下面的代码在悬停时运行良好，但我无法将函数放在外面，以便可以通过单击来调用它。在该函数中，只有用于计算工具提示位置及其显示方式的内容，并且可以正常工作。

非常感谢您的帮助。

var targets = $( '[rel~=tooltip]' ),
    target  = false,
    tooltip = false,
    title   = false;

targets.on( 'mouseenter', function()
{
    target  = $( this );
    tip     = target.attr( 'title' );
    tooltip = $( '<div id="tooltip"></div>' );



    if( !tip ) {
        return false;
    }

    target.removeAttr( 'title' );
    tooltip.css( 'opacity', 0 )
           .html( tip )
           .appendTo( 'body' );

    var init_tooltip = function()
    {
        containerList = $('.container').find('.listImages');

        if( containerList.width() < tooltip.outerWidth() * 1.5 )
            tooltip.css( 'max-width', containerList.width() / 2);
        else
            tooltip.css( 'max-width', 340 );

        var pos_left = target.offset().left + ( target.outerWidth() / 2 ) - ( tooltip.outerWidth() / 2 ),
            pos_top  = target.offset().top + target.outerHeight(),
            pos_right = target.offset().right + ( target.outerWidth() / 2 ) - ( tooltip.outerWidth() / 2 );

            console.log(pos_right)

        if( pos_left < containerList.offset().left )
        {
            pos_left = target.offset().left;
            tooltip.addClass( 'left' );
        }
        else {
            tooltip.removeClass( 'left' );
        }

        if( pos_left + tooltip.outerWidth() > containerList.offset().left + containerList.width() )
        {
            pos_left = target.offset().left - tooltip.outerWidth() + target.outerWidth();
            tooltip.addClass( 'right' );
        }
        else {
            tooltip.removeClass( 'right' );
        }


        if( pos_top < 0 )
        {
            var pos_top  = target.offset().top + target.outerHeight();
            tooltip.addClass( 'top' );
        }
        else {
            tooltip.removeClass( 'top' );
        }

        tooltip.css( { left: pos_left, top: pos_top } )
               .animate( { top: '+=10', opacity: 1 }, 50 );
    };

    init_tooltip();
    $( window ).resize( init_tooltip );

    var remove_tooltip = function()
    {
        tooltip.animate( { top: '-=10', opacity: 0 }, 50, function()
        {
            $( this ).remove();
        });

        target.attr( 'title', tip );
    };



    target.bind( 'mouseleave', remove_tooltip );

});

Answer 1

我根据您在问题中提供的内容创建了一个 fiddle :http://jsfiddle.net/R26Ba/1/

但是，因为我没有您的页面的完整实现，所以它更多地基于理论，而不是在 Fiddle 中实际使用。

本质上我所做的是创建一个 Tooltip 对象:

function Tooltip(el) {
    //...
}

其中具有原型(prototype)方法create、position和destroy。然后创建自定义绑定(bind)，根据鼠标事件创建和销毁工具提示:

$('[rel~=tooltip][title]').on({
    'tooltip.create': function() {
        $(this).trigger('tooltip.destroy');

        activeTooltip = new Tooltip(this);
    },
    'tooltip.destroy': function() {
        if(activeTooltip) {
            activeTooltip.destroy();
        }
    },
    'mouseenter': function() {
        $(this).trigger('tooltip.create');
    },
    'mouseleave': function() {
        $(this).trigger('tooltip.destroy');
    },
    'click': function(e) {
        e.stopPropagation();

        if(activeTooltip && activeTooltip.el == this) {
            $(this).trigger('tooltip.destroy');
        } else {
            $(this).trigger('tooltip.create');
        }
    }
});

$(document.body).on('click', function() {
    if(activeToolTip) {
        activeTooltip.destroy();
    }
});

$(window).on('resize', function() {
    if(activeTooltip) {
        activeTooltip.position();
    }
});

另外，附注:您可能会注意到我清理了很多 outerWidth/Height 和 offset 调用。调用这些函数的成本可能非常昂贵(性能方面)，因此您确实需要留意必须使用它们的次数。

旁注 2:您可能还想使用 resizeEnd jQuery 的事件插件。这将限制对 position 方法的调用量，并提高整体性能。

旁注 3:我现在在 mock 自己，因为我付出了这样的努力，然后才意识到......你如何才能点击一个元素而不导致 mouseenter 要触发的事件？