Bootstrap Tooltip（3.3.6）显示灰色框

Question

我正在使用bootstrap，在页面开头初始化它：

<script src="~/Scripts/bootstrap.min.js"></script>

然后我有了我的班级，我希望将其悬停在：

<div class="panel-body">
   <div class="progress">
       <div class="progress-bar progress-bar-orderstatus" data-toggle="tooltip" data-placement="top" title="Hooray!" style="width: 14.28%">
           Received
       </div>
   </div>
</div>

最后我有：

<script>
  $(document).ready(function(){
      $('[data-toggle="tooltip"]').tooltip();
  }); 
</script>

最后，结果：

究竟出了什么问题？

我已经检查了Bootstrap.js中的Tooltip版本，显示了它的版本：3.3.6

Answer 1

试试这个

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

.panel-body{margin-top:25px;}

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="panel-body">
   <div class="progress">
       <div class="progress-bar progress-bar-orderstatus" data-toggle="tooltip" data-placement="top" title="Hooray!" style="width: 14.28%">
           Received
       </div>
   </div>
</div>