Bootstrap popover不适用于iPad safari

我做了一个简单的Bootstrap弹出窗口，我调用了popover（）函数（使用jQuery）。一切似乎都没问题，但是当我在iPad上测试时，它不起作用。Bootstrap popover不适用于iPad safari

<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>

这里是我的javascript：

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

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

来源

2015-12-02 Masih

我有困难就找到了解决办法，这里是固定的代码，我希望它会有人1天工作：

我认为（data-trigger =“focus”）是造成问题的部分。它也可以通过删除该属性在iPad上运行。

<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/

来源

2015-12-02 17:53:49 Masih

HTML：

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

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

来源

2015-12-21 05:31:33

有时候，你需要用它来data-trigger="focus"工作，为这些实例独立于平台应按照此例如：

<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>

关键是要确保您使用的<a>标签，也有tabindex="0"和role属性设置。

我花了一段时间在the documentation中找到它。希望它能帮助别人。

来源

2016-01-27 21:11:28

完美的作品，谢谢！ –

我已经尝试了所有的iOS兼容性，下面是我发现的唯一功能，它可靠地在iOS浏览器中工作。

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

来源

2017-04-12 12:30:47

Bootstrap popover不适用于iPad safari

回答

相关问题