Mystère avec ce plug-in Tooltip?

Bonjour à tous,

Un peu novice dans l'utilisation des trucs jQuery, je fais face pourtant à quelque chose de mystérieux. J'ai voulu essayé ce plug-in du site jQueryTools.

Je voulais essayé sur mon serveur web en local si ça fonctionnait bien. J'ai donc copié le code de cette page : http://flowplayer.org/tools/demos/tooltip/any-html.htm et adapté les chemins pour les images.

Ben ça ne fonctionne pas et ça fait 3 ou 4 heures que je galère à trouver le problème et je n'y comprends rien. Le tooltip n'apparaît pas et je ne vois pas ce que je fais qui n'est pas correct, je reproduis essentiellement le même truc. Je vous donne le contenu de mon fichier html :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Login tooltip test</title>   
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script src="http://cdn.jquerytools.org/1.2.3/tiny/jquery.tools.min.js"></script>
    <style>
 
body {
    margin:200px;
}    
 
 
 
/* trigger button */
#download_now {
    background:transparent url(img/download.png) no-repeat scroll 0 0;
    display:block;
    height:44px;
    margin-bottom:30px;
    overflow:hidden;
    text-indent:-999em;
    width:159px;
    cursor:pointer;
}
 
/* mouseover state */
#download_now:hover {
    background-position:0 -44px ;        
}
 
 
/* clicked state */
#download_now:focus {
    background-position:0 -88px;
}
 
/* tooltip styling */
.tooltip {
    display:none;
    background:url(img/black_arrow_big.png);
    height:163px;
    padding:40px 30px 10px 30px;
    width:310px;
    font-size:11px;
    color:#fff;
}
 
/* a .label element inside tooltip */
.tooltip .label {
    color:yellow;
    width:35px;
}
 
.tooltip a {
    color:#ad4;
    font-size:11px;
    font-weight:bold;
}
</style>
 
 
 
</head>
<body>
    <!-- trigger element. a regular workable link -->
<a id="download_now">Download now</a>
 
<!-- tooltip element -->
<div class="tooltip">
 
 
 
    <table style="margin:0">
        <tr>
            <td class="label">File</td>
            <td>flowplayer-3.2.2.zip</td>
        </tr>
 
        <tr>
            <td class="label">Date</td>
            <td>2010-06-03</td>
        </tr>
        <tr>
            <td class="label">Size</td>
            <td>112 kB</td>
 
        </tr>
        <tr>
            <td class="label">OS</td>
            <td>all</td>
        </tr>        
    </table>
 
    <a href="/3.2/">What's new in 3.2</a>
 
</div>
 
<script type="text/javascript">
// What is $(document).ready ? See: http://flowplayer.org/tools/documentation/basics.html#document_ready
$(document).ready(function() {
 
$("#download_now").tooltip({ effect: 'slide'});
});
</script>
 
</body>
</html>

Quelqu'un peut me dire ce que je fais de pas correct et quelqu'un peu tester de son côté s'il a les mêmes symptômes ?

Merci à l'avance de votre précieuse aide.