Last Bootstrap工具提示不起作用

时间:2014-08-24 20:18:48

标签: css css3 twitter-bootstrap twitter-bootstrap-3 twitter-bootstrap-2

这是我的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)工作正常,除非我在表格的最后一行中提供了工具提示。

3 个答案:

答案 0 :(得分:0)

表格中的最后一个工具提示缺少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">

答案 1 :(得分:0)

你给的代码,应该工作,它的工作原理,我尝试在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'?

答案 2 :(得分:0)

我刚刚添加了

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

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