Tooltip avec jQuery : fonctionnelle mais pas très belle

**Loïc B.** · 18/04/2010, 22h04

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

...

Vous auriez une idée pour me sortir de ce mauvais pas ?

**nims** · 18/04/2010, 22h11

Salut !!

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.

Normal !! Le css de tes div n'existe plus donc il n'y a plus de mise en page...

**Loïc B.** · 18/04/2010, 23h04

(Merci pour le déplacement du sujet, j'avais pas vu cette section)

J'avais bien compris que ça venait du CSS, mais il était obscur et j'y comprenais franchement rien...

Bon alors je m'y suis plongé et j'ai supprimé des trucs juste à tant que ça marche plus. Du coup, j'ai un truc qui fonctionne, mais j'y comprends rien :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
<!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>
 
 <style type="text/css">
 
	div.element{ position:relative; }
	div.tooltip {position:absolute; background-color:#FF9 ; top:0.0em; right:10em }
 
 </style>
 
 
<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
		$('div.element').hover(
				function(){$(this).find('div.tooltip').fadeIn(500);},
				function(){$(this).find('div.tooltip').fadeOut(500);}
		);
	}
});
</script>
 
</head>
 
<body>
<div class='element'>
	<li>Une tooltip apparaît en suvolant ce texte
		<div class="tooltip">
			Tooltip 1
		</div>
	</li>
</div>
 
<div class='element'>
  <li>Une autre tooltip apparaît en suvolant ce texte
		<div class="tooltip">
			Tooltip 2
		</div>
	</li>
</div>
 
<div class='element'>
Autre ligne de texte.
</div>
</div>

Ce qui m'intrigue c'est ce div.element avec position à relative et div.tooltip avec position à absolute. Pourquoi on peut pas se contenter juste de div.tooltip {position:relative} ?

J'ai essayé, et bien sûr ça ne fonctionne pas, mais c'est obscur pour moi ...

**danielhagnoul** · 19/04/2010, 02h57

Bonsoir.

Un exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<meta name="description" content="Page type">
	<title>Page type</title>
	<style>
		/* BASE */
		body {
			background-color:#ffffff;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		/* TEST */
		span.tooltip {
			display:block;
			position:relative;
			top:12px;
			left:12px;
			width:200px;
			height:auto;
			padding:6px;
			background-color:yellow;
			border:1px solid gray;
		}
		.ulClass {
			margin:24px;
		}
		.ulClass li {
			list-style:disc;
			margin:24px;
		}
	</style>
	<script charset="utf-8" src="../lib/jqueryui-1.8/js/jquery-1.4.2.min.js"></script>
 	<script>
		$(function(){
			// On cache les tooltips
			$('span.tooltip').hide();
 
			// On active le comportement des tooltips
			$('li').hover(
				function(){
					// stop et delay évite les accidents lorsque l'utilisateur passe et repasse
					// voir la documentation jQuery http://api.jquery.com/
					$('span.tooltip').stop(true, true).delay(200).text($(this).attr("tip")).fadeIn(1000);
				},
				function(){
					$('span.tooltip').fadeOut(1000);
				}
			);
		});
	</script>
</head>
<body>
	<div id="conteneur">
		<ul class="ulClass">
			<li tip="Le texte du tooltip">
				Une tooltip apparaît en survolant ce texte
			</li>
			<li tip="Un autre texte d'un autre tooltip">
				Une autre tooltip apparaît en suvolant ce texte
			</li>
		</ul>
		<span class="tooltip"></span>
	</div>
</body>  
</html>

Il existe bien des manières de faire un tooltip, mais pour un débutant ce n'est pas un exercice aussi facile qu'il y paraît au premier abord.

Voir : http://danielhagnoul.developpez.com/...ip/tooltip.php

La maîtrise du CSS est un préalable indispensable avant de se lancer en jQuery.

Tooltip avec jQuery : fonctionnelle mais pas très belle

jQuery

Vue hybride

Discussions similaires

Partager

Partager