您可以为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>