Question

我已经完成了所有工作，但无法让我的代码工作！简单的Navbar演示

<!--- This is the main CSS file for bootstrap. --->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">

    <!-- Latest compiled and minified JavaScript for bootstrap.-->
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

    <!-- jQuery files as we will be needing it. -->
    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>

    <script>
        $("#item").tooltip();
    </script>
</head>
<!-- End the Head Section -->
<body>
<a class="tip" data-toggle="tooltip" data-placement="right" href="#" id="item1" title="Hello World!">Home</a>
    <div class="container" style="padding-top: 50px;">  
        <nav class="navbar">
            <ul class="nav nav-pills">
                <li class="active"><a class="tip" href="#" data-toggle="tooltip" id="item1" title="Hello World!">Home</a></li>
            </ul>
        </nav>
    </div>
</body>

我做错了什么？我在不同的浏览器上试过它，检查链接。找不到任何东西......

Answer 1

您需要在加载bootstrap之前加载jquery。 jquery是引导脚本工作的先决条件。

 <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<!-- jQuery files as we will be needing it. -->
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<!-- Latest compiled and minified JavaScript for bootstrap.-->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

此外，您需要将脚本访问document.ready中的元素（#item），因为您的脚本位于元素之前。

$(function(){
    $("#item").tooltip(); //Note that selector should be #item1 and not #item accoring to your html.
});

<强> Demo

Bootstrap工具提示不工作 - 即使是jQuery

1 个答案: