鼠标悬停后显示图层

我会尝试通过添加manual触发器和添加您自己的js来修改它。试试这个：

$(document).ready(function() {
    $('[data-toggle="popover"]').popover({
        html: true,
        trigger: 'manual',
        placement: 'right'
    }).mouseenter(function() {
        $(this).popover('show');
        $(".popover").mouseenter(function(e) {
            e.preventDefault();
            $(this).mouseleave(function() {
                $(this).popover('hide');
            });
        });
    });
});

另一个解决方案

+1给CodeGodie他的解决方案。我想我还应该包括你链接的网站内正在发生的事情的详细分类。下面是他们代码的简化版本，我为每一行都添加了注释，以便您可以继续阅读。

首先，这里是JsFiddle链接：https://jsfiddle.net/69k2kjng/36/

Javascript

$(document).ready(function(){
    var hideInfoLayerTimer, // create timer for hiding the info-layer
        showInfoLayerTimer, // create timer for showing the info-layer
        infoLayer = $('#infoLayer'); // set info-layer to variable
    // -------------------------------------------------------
    // Bind the mouse events to the movie container, ...
    //  and also to any children of the movie container.
    // -------------------------------------------------------
    $('.movie').add('.movie span').on('mouseover',function(e){
        showInfoLayer(e.target); // begin the countdown to show the info-layer when the user's cursor hovers over the movie container (or children of the movie container)
    })
    .on('mouseout',function(e){
        hideInfoLayer(); // begin the countdown to hide the info-layer if the user's cursor leaves the movie-container
    });
    // -------------------------------------------------------
    // Bind mouse events to the info-layer container
    // -------------------------------------------------------
    infoLayer.on('mouseover',function(e){ // reset the timer as the user's cursor hovers over the info-layer
        clearInterval(hideInfoLayerTimer);
    })
    .on('mouseout',function(e){ // begin the hide countdown if the user's cursor leaves the info-layer
        hideInfoLayer();
    });
    // -------------------------------------------------------
    // create the function that sets the "showInfoLayerTimer"
    // -------------------------------------------------------    
    function showInfoLayer(obj){
        clearInterval(showInfoLayerTimer);
        clearInterval(hideInfoLayerTimer);
        // assign the movie container to a variable. also, double-check that it is the
        //  movie container and not a child of the movie container.
        var movie = $(obj).hasClass('movie') ? $(obj) : $(obj).parents('.movie');
        // when the user's cursor hovers over the movie container for 
        // longer than .5 seconds, this will display the info-layer
        showInfoLayerTimer = setTimeout(function(){
            clearInterval(showInfoLayerTimer)
            var title = movie.children('.movie-item-title').text(), // get the title text from the movie container
                info = movie.children('.movie-item-info').text(), // get the info text from the hidden child of the movie container.
                leftPos = movie[0].offsetLeft, // get the left offset of the movie container
                topPos = movie[0].offsetTop, // get the right offset of the movie container
                osWidth = movie[0].offsetWidth; // get the width of the movie container
            // here, we will position the info-layer prior to displaying it.
            infoLayer.css('top', topPos) // offset the top of the info-layer
            .css('left',leftPos+osWidth-10); // offset the left side of the info layer. 
            // **Note: Most tooltip plugins check which side of the element has more screen-space, and
            //    will alternate to align the right of the tooltip to the left of the element or vice-versa.
            infoLayer.children('.infolayer-item-title').text(title); // set the text of the info-layer "title" container
            infoLayer.children('.infolayer-item-info').text(info); // set the text of the info-layer "info" container
            infoLayer.fadeIn('fast'); // show the info-layer
        },500);
    };
    // -------------------------------------------------------
    // create the function that sets the hideInfoLayerTimer
    // -------------------------------------------------------
    function hideInfoLayer(){
        clearInterval(showInfoLayerTimer); // clear any existing showInfoLayerTimers
        clearInterval(hideInfoLayerTimer); // clear any existing hideInfoLayerTimers
        hideInfoLayerTimer = setTimeout(function(){ // hide the info-layer if the user leaves the area for .1 seconds
            infoLayer.fadeOut('fast');
        },100);
    };
});

HTML

<div data-movieid="1" class="movie">
<span class="movie-item-title">Lord of The Rings</span>
    <span class="movie-item-info" style="display:none;">
        A bunch of straight men fight over jewelry.
    </span>
</div>
<div data-movieid="2" class="movie">
    <span class="movie-item-title">Willy Wonka</span>
    <span class="movie-item-info" style="display:none;">
        An eccentric billionaire lures kids to his factory.
    </span>
</div>
<div id="infoLayer">
    <span class="infolayer-item-title"></span>
    <hr />
    <span class="infolayer-item-info" style="font-style:italic;color:grey;font-size:.9em;text-align:center;width:100%;display:block;"></span>
</div>

CSS

.movie {
    float: left;
    border-radius:4px;
    margin: 20px;
    background-color: #4072B4;
    border: solid 1px black;
    color:white;
    width: 165px;
    padding: 8px;
    box-sizing: border-box;
    height: 220px;
    cursor:pointer;
}
.movie .movie-item-title {
    display: block;
    font-weight: bold;
    font-size: 1.2em;
    margin: 50% auto;
    text-align: center;
    vertical-align: middle;
}
#infoLayer {
    color: grey;
    height: 100px;
    width: 272px;
    position: absolute;
    border: 3px solid grey;
    border-radius: 20px;
    display: none;
    top: 38px;
    left: 378px;
    background: rgba(255,255,255,.97);
}    
#infoLayer .infolayer-item-title {
    font-weight:bold;
    font-size:1.2em;
    margin:0 auto;
    display:block;
    padding-left:10px;
    padding-top:10px;
}