Bootstrap Tooltip NOT Working - EVEN with jQuery

I have done everything but can't get my code to work! Simple Navbar Demo

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

What am I doing wrong? I tried it on different browsers, checked for the links. Can't find anything...

Solution

You need to load jquery before loading bootstrap. jquery is a prerequisite for bootstrap script to work.

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

Also you need to place your script accessing the element (#item) in document.ready since your script comes before the element.

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

Demo