bootstrap popover-如何弄清楚为什么它不起作用

时间:2019-03-05 11:52:14

标签: html css bootstrap-4 popover

我正在尝试在我的网站上实现自举弹出窗口功能。以前它可以工作,但是沿线却停止了工作(可能是由于添加了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>

1 个答案:

答案 0 :(得分:0)

只需看下面的代码。希望对您有帮助

$(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>