Tooltip avec jQuery : fonctionnelle mais pas très belle
Bonjour,
je me suis mis au javascript at à jQuery aujourd'hui. Pas facile, mais offrant de belles possibilités pour ce que j'envisage. Bref, l'heure est aux tooltips, j'ai commencé par ça, pourquoi pas ...
J'ai bien compris le principe en reprenant les mêmes tooltips de la page d'accueil de jQuery (http://jquery.com/) décortiqué par un gars (http://davidwalsh.name/jquery-homepage-mootools)
En gros, j'en suis arrivé à un truc minimaliste qui me plaît bien :
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
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="jQuery/jquery-1.4.2.js"></script>
<script type="text/javascript">
// Evenement qui se déclenche après le chargement du document
$(document).ready(function() {
{
// On cache les tooltips
$('div.tooltip').hide();
// On active le comportement des tooltips
$('li').hover(
function(){$(this).find('div.tooltip').fadeIn(500);},
function(){$(this).find('div.tooltip').fadeOut(500);}
);
}
});
</script>
</head>
<body>
<div >
<li>Une tooltip apparaît en survolant ce texte
<div class="tooltip">
Tooltip 1
</div>
</li>
<li>Une autre tooltip apparaît en suvolant ce texte
<div class="tooltip">
Tooltip 2
</div>
</li>
Autre ligne de texte.
</div>
</body>
</html> |
Mais pour mieux comprendre, je me suis détaché du CSS dès le début. Résultat, mes tooltips ne sont plus du tout dans des petits encadrés jolis, mais en plein milieu de mon document.
Et impossible de comprendre comment ça fonctionne malgré les exemples cités. Bref j'ai tout cassé et je sais pas réparer :cry: ...
Vous auriez une idée pour me sortir de ce mauvais pas ?
