A tooltip program does not work.. Why ?

A tooltip program does not work.. Why ?

I am studying jQuery and  am practicing with an example on tooltips function. The program does not work despite it is free from any error. I applied another on tooltips function example and it worked normally. The example is listed below. I would so grateful for any enlightening tips.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<link href=" http://localhost/3rd/_css/jquery-ui.min.css" rel="stylesheet">
<link href=" http://localhost/3rd/_css/site.css" rel="stylesheet">
<script src=" http://localhost/3rd/_js/jquery.min.js"></script>
<script src=" http://localhost/3rd/_js/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
 $('#contact').tooltip({
    content: $('#contactInfo').html();
 }); // end tooltip
}); // end ready
</script>
</head>
<body>
<div class="wrapper">
    <header>
        JAVASCRIPT <span class="amp">&amp;</span> jQUERY: THE&nbsp;MISSING&nbsp;MANUAL
    </header>
    <div class="content">
        <div class="main">
            <h1>Tooltips</h1>
            <p>You can add tooltips to anything on a page.</p>
            <div class="row">
            <p id="contact" title="hello contact">Contact Us</p>
            </div>
        </div>
    </div>
    <footer>
        <p>JavaScript &amp; jQuery: The Missing Manual, 3rd Edition, by <a href=" http://sawmac.com/">David McFarland</a>. Published by <a href=" http://oreilly.com/">O'Reilly Media, Inc</a>.</p>
    </footer>
</div>
<!-- put template here -->
<script id="contactInfo" type="text/template">

<p>You can reach us at 555-555-5555</p>
<p><img src="images/map.png" title="I am a map!"></p>

</script>
</body>
</html>