Bootstrap 弹出窗口在 iPad 野生动物园中不起作用

Question

我做了一个简单的 Bootstrap 弹出框，我调用了 popover() 函数（使用 jQuery）。一切似乎都很好，但是当我在 iPad 上测试时，它不起作用。

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

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

Answer 2

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

Answer 3

有时您需要它与 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 中找到它。希望对大家有帮助。

Answer 4

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

Bootstrap 弹出窗口在 iPad 野生动物园中不起作用

Bootstrap popover is not working on iPad safari

javascript

jquery

ipad

twitter-bootstrap