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.
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');
}
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;
}
}