Bootstrap 3.0 With Jquery 2.0.3 Tooltip无法正常工作，为什么？

Question

Code as follows: 代码如下：

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

Looked at the other link which [https://stackoverflow.com/questions/18410922/bootstrap-3-0-popovers-and-tooltips] 看了其他链接[https://stackoverflow.com/questions/18410922/bootstrap-3-0-popovers-and-tooltips]

did what it says but ain't working. 做到了它所说的，但没有用。

what is the mistake what i am making. 我在做什么错。

am i forgetting to add a reference to something? 我是否忘记添加对某事的引用？ or my JQuery verion is not good should i go back? 还是我的JQuery版本不好，我应该回去吗？

Tried the fiddler example with JQ 2.X edge on the example above mentioned in post. 在上面提到的示例中使用JQ 2.X edge尝试了提琴手示例。 and it works there. 它在那里工作。

but not for me. 但是不适合我 Strange. 奇怪。 it may be some thing really small. 可能有些东西真的很小。 but cant seem to get it. 但似乎无法做到。

Any help is appreciated. 任何帮助表示赞赏。

Answer 1

I made a JS fiddle based on your code which can be found here - http://jsfiddle.net/w2gTy/ 我根据您的代码制作了一个JS小提琴，您可以在这里找到它-http://jsfiddle.net/w2gTy/

For the jQuery dependency I used 2.0.2, hopefully that isn't the difference. 对于jQuery依赖关系，我使用2.0.2，希望两者没有区别。 That said, you were missing 'document' in your $.ready declaration. 就是说，您在$ .ready声明中缺少“文档”。 Without it the tooltips never appeared. 没有它，工具提示永远不会出现。

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

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

That said, you could also even omit the $(document).ready() section and leave just the .tooltip initializers and that would work as well. 就是说，您甚至可以省略$（document）.ready（）部分，而只保留.tooltip初始化程序，它也可以正常工作。

Bootstrap 3.0 With Jquery 2.0.3 Tooltip无法正常工作，为什么？

问题描述

1 个解决方案

解决方案1
3 已采纳 2013-11-14 18:24:51

Bootstrap 3.0 With Jquery 2.0.3 Tooltip无法正常工作，为什么？

问题描述

1 个解决方案

解决方案1 3 已采纳 2013-11-14 18:24:51

解决方案1
3 已采纳 2013-11-14 18:24:51