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

回答

相關問題