如何在移动设备上的点击上禁用引导弹出窗口

Question

I am getting one major issue of bootstrap popover, it's working fine in desktop but not in mobile, When I tap on button which has pophover it's opening tooltip at first tap and firing event on second tap.

In sort : bootstrap popover not firing event in one tap in mobile device, It's showing tool-tip instead.

I want to get it disabled on mobile devices, or fire event with tooltip.

Let me show codes:

HTML

<div class="container">
  <h3>Popover Example</h3>
  <a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content" class="">Hover over me</a>
</div>

JavaScript

$('[data-toggle="popover"]').popover();   
    $('[data-toggle="popover"]').click(function(){
        alert("I am clicked");
})

What I tried

var win = $(window).width();
   if(win<767) {
      $('[data-toggle="popover"]').removeAttr('data-toggle');
      // Or something like this disable popover
      $('[data-toggle="popover"]').popoverDisabled();
    }

So, Is there any function or attributes which can fix this, any help/suggestion would be appreciate.

Answer 1

This will work: $('.className').popover('disable');

Any for mobile only, for example:

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
        $('.className').popover('disable');
}

Answer 2

First Check Mobile Version run this function :-

detectmob();
function detectmob() {
   if(window.innerWidth <= 800 && window.innerHeight <= 600) {
     $('[data-toggle="popover"]').popover("hide");
   } else {
     return false;
   }
}