Paramone Paramone - 3 months ago 23
HTML Question

Bootstrap Tooltip (3.3.6) shows grey box

I'm using bootstrap, initializing it at the start of my page:

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


Then I have my class, where I want to have my hover on:

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


And at the end I have:

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


And finally, the result:

enter image description here

What exactly is going wrong?

I've checked the Tooltip version inside of Bootstrap.js, showing it's version: 3.3.6

Answer

Try this

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

Comments