How can I keep Bootstrap popovers alive while being hovered?

Related searches

I am using a Bootstrap popover to create a hover card showing user info, and I am triggering it on mouseover of a button. I want to keep this popover alive while the popover itself is being hovered, but it disappears as soon as the user stops hovering over the button. How can I do this?

$('#example').popover({
    html : true,
    trigger : 'manual',
    content : function() {
        return '<div class="box">Popover</div>';
    }
});

$(document).on('mouseover', '#example', function(){
    $('#example').popover('show');
});

$(document).on('mouseleave', '#example', function(){
    $('#example').popover('hide');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>

<a href="#" id="example" class="btn btn-danger" rel="popover" >hover for popover</a>

Test with code snippet below:

Small modification (From the solution provided by vikas) to suit my use case.

  1. Open popover on hover event for the popover button
  2. Keep popover open when hovering over the popover box
  3. Close popover on mouseleave for either the popover button, or the popover box.

$(".pop").popover({
    trigger: "manual",
    html: true,
    animation: false
  })
  .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);
  });
<!DOCTYPE html>
<html>

<head>
  <link data-require="bootstrap-css@*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
  <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script data-require="bootstrap@*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>

  <link rel="stylesheet" href="style.css" />

</head>

<body>
  <h2 class='text-primary'>Another Great "KISS" Bootstrap Popover example!</h2>
  <p class='text-muted'>KISS = Keep It Simple S....</p>

  <p class='text-primary'>Goal:</p>
  <ul>
    <li>Open popover on hover event for the popover button</li>
    <li>Keep popover open when hovering over the popover box</li>
    <li>Close popover on mouseleave for either the popover button, or the popover box.</li>
  </ul>

  <button type="button" class="btn btn-danger pop" data-container="body" data-toggle="popover" data-placement="right" data-content="Optional parameter: Skip if this was not requested<br>                                    A placement group is a logical grouping of instances within a single Availability                                     Zone. Using placement groups enables applications to get the full-bisection bandwidth                                     and low-latency network performance required for tightly coupled, node-to-node                                     communication typical of HPC applications.<br>                                    This only applies to cluster compute instances: cc2.8xlarge, cg1.4xlarge, cr1.8xlarge, hi1.4xlarge and hs1.8xlarge.<br>                                    More info: <a href=&quot;http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/placement-groups.html&quot; target=&quot;_blank&quot;>Click here...</a>"
    data-original-title="" title="">
    HOVER OVER ME
    </button>
  <br><br>
  <button type="button" class="btn btn-info pop" data-container="body" data-toggle="popover" data-placement="right" data-content="Optional parameter: Skip if this was not requested<br>                                    A placement group is a logical grouping of instances within a single Availability                                     Zone. Using placement groups enables applications to get the full-bisection bandwidth                                     and low-latency network performance required for tightly coupled, node-to-node                                     communication typical of HPC applications.<br>                                    This only applies to cluster compute instances: cc2.8xlarge, cg1.4xlarge, cr1.8xlarge, hi1.4xlarge and hs1.8xlarge.<br>                                    More info: <a href=&quot;http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/placement-groups.html&quot; target=&quot;_blank&quot;>Click here...</a>"
    data-original-title="" title="">
    HOVER OVER ME... Again!
    </button><br><br>
  <button type="button" class="btn btn-success pop" data-container="body" data-toggle="popover" data-placement="right" data-content="Optional parameter: Skip if this was not requested<br>                                    A placement group is a logical grouping of instances within a single Availability                                     Zone. Using placement groups enables applications to get the full-bisection bandwidth                                     and low-latency network performance required for tightly coupled, node-to-node                                     communication typical of HPC applications.<br>                                    This only applies to cluster compute instances: cc2.8xlarge, cg1.4xlarge, cr1.8xlarge, hi1.4xlarge and hs1.8xlarge.<br>                                    More info: <a href=&quot;http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/placement-groups.html&quot; target=&quot;_blank&quot;>Click here...</a>"
    data-original-title="" title="">
    Okay one more time... !
    </button>
  <br><br>
  <p class='text-info'>Hope that helps you... Drove me crazy for a while</p>
  <script src="script.js"></script>
</body>

</html>

Bootstrap popover: Keep open while hovering, I want to keep this popover alive while it being hovered. <a href="#" id="example" class="btn btn-danger" rel="popover" >hover for popover</a> Viewed 183 times. 0. I have gone through many post on SO related to popover I endup in angularjs or javascript post. This post explains the same requirement which i need but answer is in java script and they are using bootstrap3.

I have came after another solution to this...here is the code

    $('.selector').popover({
        html: true,
        trigger: 'manual',
        container: $(this).attr('id'),
        placement: 'top',
        content: function () {
            $return = '<div class="hover-hovercard"></div>';
        }
    }).on("mouseenter", function () {
        var _this = this;
        $(this).popover("show");
        $(this).siblings(".popover").on("mouseleave", function () {
            $(_this).popover('hide');
        });
    }).on("mouseleave", function () {
        var _this = this;
        setTimeout(function () {
            if (!$(".popover:hover").length) {
                $(_this).popover("hide")
            }
        }, 100);
    });

Keep Bootstrap Popover open when you hover over content, Documentation and examples for adding Bootstrap popovers, like those found in iOS, meaning users cannot hover or click them to trigger a popover (or tooltip). will prevent the popover from floating away from the triggering element during a hidden.bs.popover, This event is fired when the popover has finished being� 1. Open popover on hover event for the popover button 2. Keep popover open when hovering over the popover box 3. Close popover on mouseleave for either the popover button, or the popover box.

Here's my take: http://jsfiddle.net/WojtekKruszewski/Zf3m7/22/

Sometimes while moving mouse from popover trigger to actual popover content diagonally, you hover over elements below. I wanted to handle such situations – as long as you reach popover content before the timeout fires, you're safe (the popover won't disappear). It requires delay option.

This hack basically overrides Popover leave function, but calls the original (which starts timer to hide the popover). Then it attaches a one-off listener to mouseenter popover content element's.

If mouse enters the popover, the timer is cleared. Then it turns it listens to mouseleave on popover and if it's triggered, it calls the original leave function so that it could start hide timer.

var originalLeave = $.fn.popover.Constructor.prototype.leave;
$.fn.popover.Constructor.prototype.leave = function(obj){
  var self = obj instanceof this.constructor ?
    obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type)
  var container, timeout;

  originalLeave.call(this, obj);

  if(obj.currentTarget) {
    container = $(obj.currentTarget).siblings('.popover')
    timeout = self.timeout;
    container.one('mouseenter', function(){
      //We entered the actual popover – call off the dogs
      clearTimeout(timeout);
      //Let's monitor popover content instead
      container.one('mouseleave', function(){
        $.fn.popover.Constructor.prototype.leave.call(self, self);
      });
    })
  }
};

Keep Bootstrap popover open when the popover itself is being , Is it possible to keep the popover alive while it is being hovered? http://jsfiddle.net/testtracker/FQE57/ you can think of working of facebook or google plus hover card, exactly same functionality, it should show up when you hover link, popover should stay up till you out of the boundaries of popover.else disappear..

I think an easy way would be this:

$('.popover').each(function () {
                    var $this = $(this);
                    $this.popover({
                        trigger: 'hover',
                        content: 'Content Here',
                        container: $this
                    })
                });

This way the popover is created inside the target element itself. so when you move your mouse over the popover, it's still over the element. Bootstrap 3.3.2 works well with this. Older version may have some problems with animation, so you may want to disable "animation:false"

How can I keep bootstrap popover alive while the popover is being , Keeping a popover open while hovering over it has been answered here (How can I keep bootstrap popover alive while the popover is being hovered?) and providing the popover with data from an AJAX call had been answered here (Load a Bootstrap popover content with AJAX. Is this possible?). Both work fine on their own, but I haven't been able to

I used the trigger set to hover and gave the container set to the #element and finally adding a placement of the box to right.

This should be your setup:

$('#example').popover({
    html: true,
    trigger: 'hover',
    container: '#example',
    placement: 'right',
    content: function () {
        return '<div class="box"></div>';
    }
});

and #example css needs position:relative; check the jsfiddle below:

https://jsfiddle.net/9qn6pw4p/1/

Edited

This fiddle has both links that work with no problems http://jsfiddle.net/davidchase03/FQE57/4/

Popovers � Bootstrap, 1. Ouvrir popover en vol stationnaire pour le bouton popover 2. Garder popover ouvert en vol stationnaire au-dessus de la boîte popover 3. Fermez popover sur mouseleave pour soit le bouton popover, soit la boîte popover.

Tip: Plugins can be included individually (using Bootstrap's individual "popover.js" file), or all at once (using "bootstrap.js" or "bootstrap.min.js"). How To Create a Popover To create a popover, add the data-toggle="popover" attribute to an element.

So after being frustrated I went back to Bootstrap’s website to read more documentation on using the popovers when low and behold, Bootstrap (while not actually saying you can) gives you a hint on their site in the popovers section on how you could possibly style them.

It won’t stay open unless I’m hovered over the element that triggers the popover. Sent from my iPhone On Nov 10, 2017, at 5:16 AM, saqib ***@***.***> wrote: look at Custom and manual triggers section in docs Regards, — You are receiving this because you authored the thread.

Comments
  • you want to keep what alive? i hover over the button and it stayed opened?
  • read last line of question
  • This works perfectly, I did notice that there was a missing ; in you second $(_this).popover("hide"). But thank you, it was so simple and clean!
  • This answer is amazing. Works great on BS3 as of May 2015 ^^
  • I used it in a table and I added container: 'body' to the options because it made the cells shift. Great answer!
  • The popover gets hidden if you enter it and then go back to the trigger element all before 300ms. To fix it, check if BOTH the popover and its trigger are :hover before hiding it in setTimeout. I'd also use setTimeout and the same approach on mouseleave the popover itself, to fix the flickering.
  • Be sure to set animation:false to fix the flicker - check in the Plunker link I have above. It works perfectly for me.
  • It is important to add animation: false otherwise moving the mouse over the link repeatedly will cause it to not work correctly
  • I have a small modification to your code @vikas (gist.github.com/Nitrodist/7913848). It rechecks the condition after 50ms so that it doesn't stay stuck open. That is, it continuously rechecks it every 50ms.
  • How can this be adapted this so it works on live elements just added to the document?
  • Finding the container could be improved by using container = self.$tip; This way, the popover can even be found when the container property is set. There's a fiddle here: jsfiddle.net/dennis_c/xJc65
  • @pferrel i have solved this issue in my fork of @Wojtek_Kruszewski 's fiddle: jsfiddle.net/HugeHugh/pN26d see the part that checks if (!thisTip.is(':visible')) before calling the originalShow()
  • If the popover is initialized with the option container: 'body', this solution will not work as expected. The variable container needs to be replaced with self.$tip. Check my answer for more details: stackoverflow.com/a/28731847/439427