CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstraptooltip
Marek
Marek

Reputation: 4081

Bootstrap Tooltip is not visible

I am trying to show tooltip when hovering over a div that is located inside table cell:

<tbody>
<tr>
    <td>
       <div class="progress">
           <div data-toggle="tooltip" data-container="body" tooltip="tooltip1" tooltip-placement="top" class="progress-bar bg-green" ng-style="getPercentageAsStyle(assetGroup, 0)">My text</div>                                    
       </div>
       ....
    </td>
</tr>
</tbody>

For some reason, tooltip is not working (it is not over the cell, but it is rendered for the document). What mistake am I doing here?

Upvotes: 0

Views: 1266

Answers (1)

Mosh Feu
Mosh Feu

Reputation: 29277

You should do the tooltip() plugin on the .progress element.

You are using AngularJS so you need to move the attributes to the .progress element. In this case I just called the plugin manually.

Also, you need to add title attribute for the text's tooltip.

$('.progress').tooltip();
table {
  width:100%;  
  margin-top:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <table>
    <tbody>
      <tr>
        <td>
          <div class="progress" title="my tooltip">
            <div data-toggle="tooltip" data-container="body" tooltip="tooltip1" tooltip-placement="top" class="progress-bar bg-green" ng-style="getPercentageAsStyle(assetGroup, 0)">My text</div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Upvotes: 1

Related Questions