Question

你能在bootstrap v4中为popovers提供一个工作的jsfiddle，还是告诉我这个有什么问题？我在bootstrap v3中找到了这个工作jsfiddle：

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

我创建了一个新的jsfiddle并将v3 js / css refs更新为v4并添加了控制台请求的其他js libs：

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

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

控制台没有返回任何错误，但jsfiddle不起作用。知道它有什么问题吗？

Answer 1

Bootstrap 4不使用与Bootstrap 3相同的结构。如果从弹出窗口规则中删除display:none，那么它们将在单击时显示，您还应该将popover类添加到模板中最外层的。

请参阅Options：

最外面的包装元素应该有.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>

你能在bootstrap v4中为popovers提供一个工作的jsfiddle，还是告诉我这个有什么问题？

1 个答案: