bootstrap popover - 如何找出它不工作的原因

Question

我正在尝试在我的网站上实现 bootstrap 弹出窗口功能。它以前工作过，但在某处停止工作（可能是由于添加了 CSS，但我不确定）。

我想知道一种可以用来弄清楚它为什么不起作用的方法。

我正在我的 javascript 函数中初始化它。

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

我的HTML代码：

<div class="col-md-3 mb-3">
<span style="width:100%">
<label style="display:block">name
<button type="button" style="float:right;" data-container="body" data-toggle="popover" data-placement="bottom" data-content="sometext">
 <i class="fas fa-question" ></i>
 </button>
  </label> 
</span>
</div>

Answer 1

看看下面的代码。希望对你有所帮助

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <hr>
    <p>A bootstrap popover example with data-html="true" to render html within data-content=""</p>
      <hr>

<a tabindex="0"
   class="btn btn-lg btn-primary" 
   role="button" 
   data-html="true" 
   data-toggle="popover" 
   data-placement="bottom" 
   data-trigger="focus" 
   title="<b>Example popover</b> - title" 
   data-content="<div><a href='/link'><b>Geoff</b> - content</a></div><div><b>Hilary</b> - content</div>">RSS <i class="fa fa-rss" aria-hidden="true"></i></a>
            
      <hr>
    </div>
  </div>
</div>

bootstrap popover - 如何找出它不工作的原因

bootstrap popover - how to figure out why it isnt working

html

css

popover

bootstrap-4