javascript - Bootstrap 工具提示 (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>