Question

我在我的Rails 5.1网站上使用Bootstrap 4.0。我为鼠标悬停触发的用户详细信息做了一个弹出框，它有网站链接。

{{1}}

所以当我移动鼠标悬停在popover本身时，我需要popover继续保持，以便我可以点击其中的网站链接。但是，如果链接将鼠标移出，目前它正在消失。我怎样才能保持开放状态？

{{1}}

谢谢！

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>

使用Bootstrap 4.0和Rails 5.1在鼠标上移动时保持popover有效

1 个答案: