您可以為bootstrap v4中的彈出窗口提供有效的jsfiddle還是告訴我這是什么問題？

Question

您可以為bootstrap v4中的彈出窗口提供有效的jsfiddle還是告訴我這是怎么回事？ 我在bootstrap v3中找到了這個工作的jsfiddle：

http://jsfiddle.net/tzhben/svgx7r21/5/

$('[data-toggle="popover"]').popover();

我創建了一個新的jsfiddle並將v3 js / css引用更新為v4，並添加了控制台請求的其他js庫：

https://jsfiddle.net/random512/2jnL1u5a/2/

$('[data-toggle="popover"]').popover();

控制台未返回任何錯誤，但jsfiddle無法正常工作。 知道有什么問題嗎？

Answer 1

Bootstrap 4的結構與Bootstrap 3的結構不同。如果從彈出規則中刪除display:none ，則它們將在單擊時出現，您還應將popover類添加到模板的最外層div中。

查看選項 ：

最.popover包裝器元素應具有.popover類。

您必須根據彈出框的箭頭來重寫CSS。 只需檢查元素以查看更改。

最小示例：

 $(function() { $('[data-toggle="popover"]').popover(); }) 

 .example-class1 { background-color: #2a4254; height: 77px; width: 77px; color: white; cursor: pointer; float: right; } .popover.popover1 { width: 250px; padding: 0px 1px 1px; text-align: left; white-space: normal; background-color: #2a4254 !important; -webkit-background-clip: padding-box; background-clip: padding-box; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, .2); border-radius: 0px !important; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2); box-shadow: 0 5px 10px rgba(0, 0, 0, .2); color: white; } .popover.popover1.bs-tether-element-attached-right::after, .popover.popover1.popover-left::after { border-left-color: #2a4254; } 

 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"> <div class="text-center example-class1" data-container="body" data-placement="left" data-content="This is a test" data-template='<div class="popover popover1" role="popover"><div class="popover-arrow"></div><div class="popover-content"></div></div>' data-toggle="popover">Test 1</div> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.3/js/tether.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>