Question

我做了一个简单的Bootstrap popover，我调用了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"一起使用，并且对于那些与平台无关的实例，您应该遵循以下示例：

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

我在找到解决方案时遇到了麻烦，这是固定的代码，我希望有一天能为某人工作：

我认为（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 3

我已经尝试了所有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 popover无法在iPad Safari上运行

3 个答案: