带有工具提示悬停的响应工具提示

Question

我已经设置了这段代码，以便使用我正在为 WordPress 构建的简码/插件......一切终于在响应式（这是第三个 jQuery 修订版）上运行良好，但我遇到了问题一件事：悬停在工具提示上。

我需要能够将鼠标移入工具提示并使其保持可见。如果出现以下情况，我需要让工具提示消失：

一个。工具提示被鼠标移出，或者.. 湾。目标被鼠标移出

jQuery 不是我的强项，我只能选择其中一个。

HTML：

<div class="mbt-hover" style="width:100px; height:auto;">
    <p>Test Text</p>
    <div class="mbt-tooltip" style="width:200px; height:auto;">
        <p>Test pop-up <a title="About" href="http://www.mindblowingthings.dev/about/">content</a>
        <ul>
            <li>this</li>
            <li>is</li>
            <li>a list</li>
        </ul>
    </div>
</div>

CSS：

#tooltip {
text-align: center;
color: #fff;
background: #111;
position: absolute;
z-index: 100;
padding: 15px;
}

#tooltip:after {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #111;
    content: '';
    position: absolute;
    left: 50%;
    bottom: -10px;
    margin-left: -10px;
}

    #tooltip.top:after {
        border-top-color: transparent;
        border-bottom: 10px solid #111;
        top: -20px;
        bottom: auto;
    }

    #tooltip.left:after {
        left: 10px;
        margin: 0;
    }

    #tooltip.right:after {
        right: 10px;
        left: auto;
        margin: 0;
    }


.mbt-tooltip {
display: none;
width: auto;
max-width: 100% !important;
} 

JQUERY

$( function() {

    var targets = $('.mbt-hover'),
        target  = false,
        tooltip = $('.mbt-tooltip'),
        title   = false;

    targets.bind( 'mouseenter', function()
    {
        target  = $( this );
        tip     = target.children('.mbt-tooltip');
        tooltip = $( '<div id="tooltip"></div>' );

        if( !tip || tip == '' )
            return false;

        //target.remove('.mbt-tooltip');
        //target.removeAttr( 'title' );
        tooltip.css( 'opacity', 0 )

               .html( tip.clone().show() )

               .appendTo( 'body' );

        var init_tooltip = function()
        {
            if( $( window ).width() < tooltip.outerWidth() * 1.5 )
                tooltip.css( 'max-width', $( window ).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 - tooltip.outerHeight() - 20;

            if( pos_left < 0 )
            {
                pos_left = target.offset().left + target.outerWidth() / 2 - 20;
                tooltip.addClass( 'left' );
            }
            else
                tooltip.removeClass( 'left' );

            if( pos_left + tooltip.outerWidth() > $( window ).width() )
            {
                pos_left = target.offset().left - tooltip.outerWidth() + target.outerWidth() / 2 + 20;
                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 }, 300, function()
            {
                $( this ).remove();
            });

            target.children('.mbt-tooltip', tip);

        };

        //**** ISSUE AREA ****//
        target.bind( 'mouseleave', remove_tooltip );
        tooltip.bind( 'click', remove_tooltip );
    });
});

小提琴： http://jsfiddle.net/RevConcept/L8bho8yu/

Answer 1

这是因为您在.mbt-hover 的mouseenter 事件上创建的tooltip

tooltip = $( '<div id="tooltip"></div>' );

是附加到body 的新元素。因为它不是.mbt-hover的孩子，当你试图将鼠标悬停在tooltip上时，它会触发.mbt-hover的mouseleave事件，从而移除tooltip。

您需要做的是将您创建的新tooltip 附加到.mbt-hover，而不是body，因此当您将鼠标悬停在tooltip 上时，它仍然算作mouseenter在.mbt-hover 上并且不会删除tooltip。 (*注意：只有当您的 tooltip absolute position 是 relative 到 body 而不是父容器时，才会产生相同的结果，如果您的 tooltip 位置是 relative 到它的父容器，您需要更改代码以计算 top、left 或 right)

你还有一些多余的code，例如：

1. var targets = $('.mbt-hover') 和 target = $( this );，这两个变量指向/指向同一个元素，即 .mbt-hover，因此最好只对 mouseenter 事件中的每个用法使用 targets，通过替换 @ 987654355@转targets。
2. 因为您的HTML 中已经有一个tooltip 类.mbt-tooltip，所以最好将它用于tooltip，而不是创建一个新的tooltip 元素来克隆您已经拥有的元素（因为在document ready 上，你用tooltip = $('.mbt-tooltip') 声明它，但是在mouseenter 上你用tooltip = $( '<div id="tooltip"></div>' ); 改变它

这是您的Updated Fiddle，它已从第一点的冗余code 中删除。