引导工具提示不可见

Question

我试图在将鼠标悬停在位于表格单元格内的 div 上时显示工具提示：

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

由于某种原因，工具提示不起作用（它不在单元格上方，而是为文档呈现）。我在这里犯了什么错误？

Answer 1

您应该在.progress 元素上添加tooltip() 插件。

您正在使用 AngularJS，因此您需要将属性移动到 .progress 元素。在这种情况下，我只是手动调用了插件。

另外，您需要为文本的工具提示添加title 属性。

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