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

Question

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

我需要能够将鼠标鼠标拖入工具提示并使其保持可见。在以下情况下，我需要工具提示消失：

一个。工具提示将鼠标悬停在 or 之外。b.目标被移出

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;
} 

简讯

$( 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

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

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

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

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

您还有一些冗余code，例如：

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

这是您的更新小提琴，它已从第一点的冗余code中删除。