twitter-bootstrap Bootstrap popover 不适用于 iPad Safari
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34049600/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap popover is not working on iPad safari
提问by Masih
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.
我做了一个简单的 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>
Here is my Javascript:
这是我的Javascript：
$("[data-toggle=popover]").popover();
回答by valentina.badea
Sometimes you need it to work with data-trigger="focus"and for those instances to be platform independent you should follow this example:
有时您需要使用它，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>
Key is to make sure you use an <a>tag and also have tabindex="0"and the roleattribute set.
关键是要确保你使用了一个<a>标签，并且还设置tabindex="0"了role属性。
It took me a while to find this in the documentation. Hope it helps someone.
我花了一段时间才在文档中找到它。希望它可以帮助某人。
回答by Masih
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.
我认为 (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>
回答by Grant G
I have tried everything for iOS compatibility, this below is the only function I have found which reliably works in iOS browsers.
我已经尝试了所有 iOS 兼容性，下面是我发现的唯一可以在 iOS 浏览器中可靠运行的功能。
HTML:-
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:-
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
});
回答by Quao Quo
html:
html：
<a href="javascript:void(0)" class="popupover" data-toggle="popover" data-trigger="click" title="Popover" data-content="something here"></a>
JS:
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
});
