0

I'm using Bootstrap 4.0 with my Rails 5.1 website. I made a popover for user details that trigger at mouse hover, it has website link in it.

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

So I need popover to stay on when I move mouse hover the popover itself, so that I can click website link in it. But currently it is disappearing as soon as I move my mouse out if the link. How can I keep it open?

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

Thank you!

1 Answer 1

1

Well I quickly created a prototype as below. You need to generate the HTML markup similar to below using Rails and include the JavaScript on your page.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.