Bootstrap 3.0 С JQuery 2.0.3 Всплывающая подсказка не работает, почему?

код следующим образом:Bootstrap 3.0 С JQuery 2.0.3 Всплывающая подсказка не работает, почему?

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <title>My God Man Project</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta charset="utf-8"> 
    <link href="/Content/bootstrap/bootstrap.css" rel="stylesheet"/> 
<link href="/Content/bootstrap/bootstrap-responsive.css" rel="stylesheet"/> 
<link href="/Content/fontawesome/font-awesome.css" rel="stylesheet"/> 
<link href="/Content/site.css" rel="stylesheet"/> 

    <script src="/Scripts/modernizr-2.6.2.js"></script> 


    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> 
    <!--[if lt IE 9]> 
     <script src="/Content/IE9FixScripts"></script> 
; 
    <![endif]--> 
    </head> 
    <body> 
    <div id="wrap"> 
    <div class="container"> 

    <!-- Main content any sections which need to be filld in and then body --> 
    <div class="container"> 

     <div class="jumbotron"> 

    <section class="featured"> 
     <div class="content-wrapper"> 
      <hgroup class="title"> 
       <h3>Home Page.</h3> 
       <h4> Welcome GodMan, if you click on the above link where it says [Needs Role] and if it works then you are good else you see a custom 401 message.</h4> 
      </hgroup> 
     </div> 
    </section> 



    <!-- footer section here needs customisation.--> 
    <div id="footer"> 
     <footer> 
      <div class="row"> 
       <div class="col-lg-12"> 
        <ul class="list-unstyled"> 
         <li class="pull-right"><a href="#top">Back to top</a></li> 
         <li><a id="testingID" href="#"data-placement="left" data-toggle="tooltip" class="btn btn-default" type="button" data-original-title="Tooltip on left">Tool Tip Left</a></li> 
         <li><a href="#"data-placement="right" data-toggle="tooltip" class="btn btn-default" type="button" data-original-title="Tooltip on left">Tool Tip Right</a></li> 
         <li><a href="#"data-placement="bottom" data-toggle="tooltip" class="btn btn-default" type="button" data-original-title="Tooltip on left">Tool Tip Bottom</a></li> 
         <li><a href="#"data-placement="top" data-toggle="tooltip" class="btn btn-default" type="button" data-original-title="Tooltip on left">Tool Tip Top</a></li> 
         <li><a href="#"data-placement="left" data-toggle="popover" class="btn btn-default" type="button" data-original-title="Tooltip on left">PopOver</a></li> 
         <li><a href="#"data-placement="left" data-toggle="popover" class="btn btn-default" type="button" data-original-title="Tooltip on left">PopOver2</a></li> 
        </ul> 
       </div> 
      </div> 
     </footer> 
    </div> 
    <!-- footer ends--> 
    </div> 
</div> 
    <script src="/Scripts/jquery-2.0.3.js"></script> 

    <script src="/Scripts/bootstrap.js"></script> 


    <script type="text/javascript"> 
     $.ready(function() { 
      $('[data-toggle="tooltip"]').tooltip(); 
      $('[data-toggle="popover"]').popover({trigger: "hover"}); 
      $('#testingID').tooltip('show'); 

      //$().tooltip({ 
      // selector: "[data-toggle=tooltip]", 
      // container: "body" 
      //}) 
     }); 
    </script> 
    </body> 
</html>

Посмотрел на другой ссылке, которую [https://stackoverflow.com/questions/18410922/bootstrap-3-0-popovers-and-tooltips]

сделал то, что он говорит, но не работает.

какая ошибка, что я делаю.

Я забываю добавить ссылку на что-то? или мой пример JQuery не хорош, если я вернусь?

Пробовал пример скрипача с краем JQ 2.X на примере выше, упомянутом в сообщении. и он работает там.

но не для меня. Странный. это может быть что-то очень маленькое. но, похоже, не получается.

Любая помощь приветствуется.

источник

2013-11-14 bhushanvinay

Я сделал скрипку JS, основанный на коде, который можно найти здесь - http://jsfiddle.net/w2gTy/

Для зависимости JQuery я использовал 2.0.2, мы надеемся, что это не разница. Тем не менее, вы не указали «документ» в своем объявлении $ .ready. Без него подсказки никогда не появлялись.

$(document).ready(function() { 
     $('[data-toggle="tooltip"]').tooltip(); 
     $('[data-toggle="popover"]').popover({trigger: "hover"}); 
     $('#testingID').tooltip('show'); 

     //$().tooltip({ 
     // selector: "[data-toggle=tooltip]", 
     // container: "body" 
     //}) 
    });

Тем не менее, вы также можете даже опустить раздел $ (документ) .ready() и оставить только .tooltip инициализаторами и что будет работать.

источник

2013-11-14 18:24:51 eric

Большое спасибо, я не мог видеть дерево для дерева, я думаю, что еще одна пара глаз определенно помогла бы. Еще раз, спасибо. вы сделали мой день. – bhushanvinay

Bootstrap 3.0 С JQuery 2.0.3 Всплывающая подсказка не работает, почему?

ответ

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