使用Bootstrap 4.0和Rails 5.1在其上移動鼠標時，保持彈出窗口處於活動狀態

Question

我在我的Rails 5.1網站上使用了Bootstrap 4.0。 我為要在鼠標懸停時觸發的用戶詳細信息制作了一個彈出窗口，其中有網站鏈接。

<a data-toggle="popover" title="Mini profile" data-content="<%= post.user.location %><%= post.user.website %>">
     <%= post.user.fullname %>
</a>

因此，當我將鼠標懸停在彈出框本身上時，我需要彈出框保持打開狀態，以便可以單擊其中的網站鏈接。 但是目前，只要鏈接將鼠標移出，它就會消失。 如何保持打開狀態？

<script type="text/javascript">
$(document).ready(function(){
    $('[data-toggle="popover"]').popover({
        placement : 'bottom',
        trigger : 'hover'
    });
});
</script>

謝謝！

Answer 1

好吧，我迅速創建了一個原型，如下所示。 您需要使用Rails生成類似於下面的HTML標記，並將JavaScript包含在頁面中。

 $("[data-toggle=popover]").each(function(i, obj) { $(this) .popover({ html: true, trigger: "manual", content: function() { var id = $(this).attr("id"); return $("#popover-content-" + id).html(); } }) .on("mouseenter", function() { var _this = this; $(this).popover("show"); $(".popover").on("mouseleave", function() { $(_this).popover("hide"); }); }) .on("mouseleave", function() { var _this = this; setTimeout(function() { if (!$(".popover:hover").length) { $(_this).popover("hide"); } }, 300); }); }); 

 .container {padding:20px;} .form-control {width:120px;} .popover {max-width:400px;} #popover-content-logout > * { background-color:#ff0000 !important; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <div class="container"> <h3>Bootstrap Popover HTML Example</h3> <a data-toggle="popover" title="Mini Profile" data-container="body" data-placement="right" type="button" data-html="true" href="#" id="info"><span class="glyphicon glyphicon-user" style="margin:3px 0 0 0"></span> Hover Over Me</a> <div id="popover-content-info" class="hide"> <strong>Pranav</strong><br/> <a href="https://pranavprakash.net">My Website</a> </div> </div>