Popover not opening properly

Question

I am working on a popover code. Which by default works with hover on website. However in the mobile view. Its existing functionality is opening and closing the popover, when we click on the question mark icon. I was trying to close the popover with touch/click event anywhere on the screen with the below code with jQuery.

  $('body').on('touchstart', function(e) {
   $('[data-toggle="popover"]').each(function() {
    if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
      $(this).popover('hide');
    }
   });
 });

But now when I want to open the popover again, it highlights the question mark icon but doesn't open the popover. It only hovers it. We have to double click to open the popover

<span href="javascript:void(0)" data-placement="top" data-toggle="popover" data-content="Promotions" data-original-title="" title="">
<a class="tool-tip">?</a>
</span>

The first time it works fine but from the second time the double click issue starts. Please help

Answer 1

You can sure find out how to solve your issue in this link How to dismiss a Twitter Bootstrap popover by clicking outside?

Using Bootstrap 4.1:

$("html").on("mouseup", function (e) {
    var l = $(e.target);
    if (l[0].className.indexOf("popover") == -1) {
        $(".popover").each(function () {
            $(this).popover("hide");
        });
    }
});