méthode pour positionner infobulle cliquable

**crozet.magenta** · 08/02/2013, 18h08

Bonjour,
j'ai une page php qui me génère un tableau de taille variable (nombre de lignes et colonnes variables).
j'aimerai ajouter sur les cases de mon tableau une infobulle cliquable (avec des liens dedans).
pour mon infobulle, j'ai pensé faire un div positionné en absolu affiché lorsque le curseur rentre dans la case et caché quand il ressort.
le problème que je rencontre est le suivant :
comment je peux faire pour positionner correctement mon div à côté de la case en sachant que le nombre de cases n'est pas prévisible et du coup la position de la cellule du tableau sur la page non plus.
il y a un screen du tableau en fichier joint
en jaune clair, c'est le fameux div infobulle

Merci d'avance pour votre aide

**NoSmoking** · 08/02/2013, 18h44

Bonjour,
tu peux faire cela en CSS pur, je te soumet un exemple de base de travail que j'avais déjà fourni dans une réponse (*).

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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[Bulle CSS]</title>
<meta name="Author" content="NoSmoking">
<style type="text/css">
* {
  font-family : Verdana;
}
h1 {
  color : #4488bb;
  font-size : 1.3em;
  border : 1px solid #c0c0c0;
  padding : 10px;
}
a.bulle {
  position : relative;
  text-decoration : none;
  border-bottom : 1px dotted #fa8;
}
a.bulle:hover {
   z-index: 100;/**/
  border : 0;
}
a.bulle span {
  display : none;
}
a.bulle:hover span {
  display : block;
  position : absolute;
  color : #000;
  background-color : #ffb;
  border : 1px solid #fa8;
  white-space : nowrap;
  top : 18px;
  left : 20px;
  padding : 5px;
}
span.info {
  position : relative;
  text-decoration : none;
  border-bottom : 1px dotted #fa8;
}
span.info span {
  display : none;
}
span.info:hover {
  z-index: 100;  /* Very Important */
}
span.info:hover span {
  display : block;
  position : absolute;
  color : #000;
  background-color : #ffb;
  border : 1px solid #fa8;
  white-space : nowrap;
  top : 18px;
  left : 20px;
  padding : 5px;
}
</style>
</head>
<body>
<h1>CSS Info bulle...</h1>
<p><a href="http://www.developpez.net" title="Pour tout savoir sur...">Visitez le site developpez.net</a></p>
<p>Antequam in <span class="info">provincia<span>Bulle</span></span> toto fuerit pervenire denique provincia <span class="info">nascetur<span>Autre <b>B</b>ulle<br>sur 2 lignes</span></span> antequam.</p>
<p>Coalito ordinarias<span class="info"> coalito Rufinus annonae<span> ad in est et praefectus Rufinus</span></span> convectio enim tempestate.</p>
<p><a href="http://www.google.fr" class="bulle">Google <span> ceci est un info-bulle<br/> qui s'affichera sur 3<br/>lignes au passage de la souris</span></a>
</p>
<p><a href="http://www.developpez.net" class="bulle">Visitez le site developpez.net <span><img src="http://aka-cdn-ns.adtech.de/apps/36/Ad2881060St3Sz1Sq5149476V0Id3/developpez-728-2.gif" alt=""></span></a></p>
</body>
</html>

Cela sera surement à modifier légèrement pour s'adapter à ton cas.

(*) finalement mes dossiers sont super bien rangés

**crozet.magenta** · 08/02/2013, 19h57

merci pour cette réponse, ça fonctionne parfaitement

méthode pour positionner infobulle cliquable

HTML

Vue hybride

Discussions similaires

Partager

Partager