Question

这是我的HTML代码：

<table>
    <tr class="primary">
        <td>1</td>
        <td>Name</td>
        <td>
            <a data-toogle="tooltip" data-placement="bottom" title="Add user" href="#/tutoria/add/1" class="glyphicon glyphicon-plus glyphicon-lg **tooltips** add-user" data-original-title="Agregar usuario"></a> 
        </td>
    </tr>
    <--!The last tooltip that I've in my table (tr) doesn't work-->
    <tr class="primary">
        <td>2</td>
        <td>Name</td>
        <td>
            <a data-toogle="tooltip" data-placement="bottom" title="Add user" href="#/tutoria/add/2" class="glyphicon glyphicon-plus glyphicon-lg **tooltips** add-user"></a> 
        </td>
    </tr>
</table>

JS代码：

$(".tooltips").tooltip();

我正在使用Backbone实现Bootstrap并且我遇到了这个问题：所有工具提示（Bootstrap）工作正常，除非我在表格的最后一行中提供了工具提示。

Answer 1

表格中的最后一个工具提示缺少data-original-title标记。您已将其包含在第一个工具提示中，这就是为什么它正在工作的原因。

更改您的代码：

<a data-toogle="tooltip" data-placement="bottom" title="Add user" href="#/tutoria/add/2" class="glyphicon glyphicon-plus glyphicon-lg **tooltips** add-user">

为：

<a data-toogle="tooltip" data-placement="bottom" title="Add user" href="#/tutoria/add/2" class="glyphicon glyphicon-plus glyphicon-lg **tooltips** add-user" data-original-title="tooltipcontenthere">

Answer 2

你给的代码，应该工作，它的工作原理，我尝试在chrome，firefox，IE上，我可以复制你的代码，但它与你的相同，除非在最后一个引号之前有另一个代码未关闭，阻止jquery将最后一个'a'识别为“.tooltips”选择器的一部分

    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="js/bootstrap/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="js/bootstrap/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap/js/bootstrap.min.js"></script>

        <script>
            $(".tooltips").tooltip();
        </script>
<html>
<body>

<table>
    <tr class="primary">
        <td>1</td>
        <td>Name</td>
        <td>
            <a data-toogle="tooltip" data-placement="bottom" title="Add user" href="#/tutoria/add/1" class="glyphicon glyphicon-plus glyphicon-lg **tooltips** add-user" data-original-title="Agregar usuario"></a>
        </td>
    </tr>
    <--!The last tooltip that I've in my table (tr) doesn't work-->
    <tr class="primary">
        <td>2</td>
        <td>Name</td>
        <td>
            <a data-toogle="tooltip" data-placement="bottom" title="Add user" href="#/tutoria/add/2" class="glyphicon glyphicon-plus glyphicon-lg **tooltips** add-user"></a>
        </td>
    </tr>
</table>

</body>

</html>

使用chrome调试器知道你何时使用选择器'.tooltips'是jquery选择最后一个'a'？

Answer 3

我刚刚添加了

<script src="http://getbootstrap.com/assets/js/docs.min.js"></script>

在bootstrap.min.js下面，它可以工作。

Last Bootstrap工具提示不起作用

3 个答案: