Question

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

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

一个。工具提示被剔除，或.. 湾目标是从

中挖出来的

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

FIDDLE： http://jsfiddle.net/RevConcept/L8bho8yu/

Answer 1

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

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

是您附加到body的新元素。由于它不是.mbt-hover的孩子，当您尝试将鼠标悬停在tooltip上时，会触发mouseleave .mbt-hover事件，从而移除tooltip {1}}。

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

您还有一些冗余target = $( this );，例如：

.mbt-hover targets，这两个变量指向/定位到同一元素mouseenter，因此您最好只使用{{1}通过将target替换为targets来为tooltip事件中的每个用法。
因为您的HTML中已经有.mbt-tooltip个tooltip，所以最好将它用于tooltip，而不是创建一个新的document ready {（1}}元素克隆您已经拥有的元素（因为在tooltip = $('.mbt-tooltip')上，您使用mouseenter声明了该元素，但随后在tooltip = $( '<div id="tooltip"></div>' );上使用code进行了更改}

这是您Updated Fiddle的{{3}}，它从第一点的冗余{{1}}中删除。

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

1 个答案: