Bootstrap popover is not working on iPad safari

Question

I made a simple Bootstrap popover, I called popover() function (using jQuery). Everything seems to be ok but when I tested on iPad it is not working.

<a href="#" title="Description" 
data-trigger="focus" 
data-container="body" 
data-toggle="popover" 
data-placement="top" 
data-content="This is a test for iPad">Click here to see description</a>

Here is my Javascript:

$("[data-toggle=popover]").popover();

https://jsfiddle.net/masiht/et26me1d/13/

Solution 1

I had a trouble finding the solution, here is the fixed code, I hope it will work for someone one day:

I think (data-trigger="focus") is the part that made problem. It will work also on iPad by removing this attribute.

<a data-container="body" 
data-toggle="popover" 
data-placement="top" 
data-content="This is a test for iPad" data-original-title="" title="Description">This works</a>

https://jsfiddle.net/masiht/et26me1d/15/

Solution 2

Sometimes you need it to work with data-trigger="focus" and for those instances to be platform independent you should follow this example:

<a tabindex="0" role="button" class="btn btn-lg btn-danger" 
      data-toggle="popover" data-trigger="focus" title="Dismissible popover"
      data-content="And here's some amazing content. It's very engaging. Right?">
  Dismissible popover
</a>

Key is to make sure you use an <a> tag and also have tabindex="0" and the role attribute set.

It took me a while to find this in the documentation. Hope it helps someone.

Solution 3

I have tried everything for iOS compatibility, this below is the only function I have found which reliably works in iOS browsers.

HTML:-

<a tabindex="0" class="popupover" role="button" data-toggle="popover" data-placement="bottom" data-trigger="focus" title="popover title" data-content="popover text here">Click Here</a>

JS:-

$('.popupover').popover();
jQuery("body").on("click touchstart", '.popupover', function() {
   $(this).popover("show");
        $('.popupover').not(this).popover("hide"); // hide other popovers
        return false;
    });
jQuery("body").on("click touchstart", function() {
    $('.popupover').popover("hide"); // hide all popovers when 
    clicked on body
});

Solution 4

html:

<a href="javascript:void(0)" class="popupover" data-toggle="popover" data-trigger="click" title="Popover" data-content="something here"></a> 

JS:

$('.popupover').popover();
jQuery("body").on("click touchstart", '.popupover', function() {
$(this).popover("show");
    $('.popupover').not(this).popover("hide"); // hide other popovers
    return false;
});
jQuery("body").on("click touchstart", function() {
    $('.popupover').popover("hide"); // hide all popovers when clicked on body
});

View more solutions