Bootstrap popover在iPad safari上不起作用

Bootstrap popover is not working on iPad safari

本文关键字：不起作用 safari iPad popover Bootstrap      更新时间：2023-09-26

我做了一个简单的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/

有时您需要它来与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属性。

我花了一段时间才在文档中找到这个。希望它能帮助到别人。

我很难找到解决方案，这是修复的代码，我希望有一天它能为某人工作：

我认为（数据触发器="焦点"）是造成问题的部分。通过删除此属性，它也可以在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/

我已经尝试了所有与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
});

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
});
相关文章：