Bootstrap popover closes when hovering on popover content

Question

I have a bootstrap popover. Following is the html markup

<header>
 <a class="my-popover" data-popover="my-popover" popover-placement="bottom" data-html="true" data-toggle="popover" data-container="nav">open</a>
<div class="my-popover-flyout hide">
<h1>Popover content</h1>
<button>Click Me</button>
</div>
</header>

I have following piece of JS code to trigger popover on focus or hover

const popover = $('.my-popover');
  const header = document.getElementsByTagName('header')[0]
  $(popover).popover({
    container: header,
    delay: { show: 0, hide: 25 },
    placement: 'bottom',
    html: true,
    content: $(`.${$(popover).attr('data-popover')}-flyout`).html(),
    trigger: 'focus hover',
  });

The popover appear but i can not click the button in popover as it closes as soon as i hover over any part of popover. I have added popover to header. If i add it a tag everything work fine. But i need the popover to be added to header. How can i fix this issue?

Answer 1

To ensure that your popover remains open when hovering over its content, you need to manually trigger the popover event. This entails creating your own event listeners for mouse enter and mouse leave actions.

CODE

var counter;
$('[rel="popover"]').popover({
        container: 'body',
        html: true,
        trigger: 'manual',
        content: function () {
            var html = $($(this).data('popover-content')).html();
            return html;
        }
    }).on("mouseenter", function(e) {
        var _this = this;
        e.preventDefault();
        clearTimeout(counter);
        $('[rel="popover"]').not(_this).popover('hide');
        counter = setTimeout(function(){
            if($(_this).is(':hover'))
            {
                $(_this).popover("show");
            }
            $(".popover").on("mouseleave", function () {
                $(_this).popover('hide');
            });
        }, 400);
        
    }).on("mouseleave", function () {
        var _this = this;

        setTimeout(function () {
            if (!$(".popover:hover").length) {
                if(!$(_this).is(':hover')) // change $(this) to $(_this) 
                {
                   $(_this).popover('hide');
                }
            }
        }, 200);
    });

a[rel="popover"]{
    display: inline-block;
    margin: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<a href="#" rel="popover" data-trigger="focus" data-popover-content="#list-popover">Show Popover</a>
<a href="#" rel="popover" data-trigger="focus" data-popover-content="#list-popover">Show Popover</a>
<a href="#" rel="popover" data-trigger="focus" data-popover-content="#list-popover">Show Popover</a>

<div id="list-popover" class="hide">
  <ul class="nav nav-pills nav-stacked">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>
<div id="output">
<div>