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

您应该在tooltip()元素上执行.progress插件。

您正在使用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>

Bootstrap工具提示不可见

1 个答案: