2013-12-09 2 views
1

Я сделал все, но не смог заставить мой код работать! Простой Navbar ДемоBootstrap Tooltip НЕ работает - ДАЖЕ с jQuery

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

Что я делаю неправильно? Я попробовал это в разных браузерах, проверил ссылки. Не можете найти ничего ...

ответ

2

Перед загрузкой загрузочного буфера загрузите 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> 

Кроме того, необходимо поместить сценарий доступа к элементу (#item) в document.ready, так как ваш сценарий идет перед элементом.

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

Demo

Смежные вопросы