Discussion :

[GillesV]

Bonjour,
J'ai une structure HTML qui ressemble à ce qui suit et un CSS tel que quand je survole la phrase "un titre", ça fait apparaître un autre div:

Code html :

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

1
2
3
<div class="div1">un titre
<div class="apparait_au_survol_de_div1">ici du contenu</div>
</div>

Mais si je désinbrique les deux div pour avoir ce qui suit, le coup du "montrer/cacher" au survol ne marche plus.

Code html :

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

1
2
<div class="div1">un titre</div>
<div class="apparait_au_survol_de_div1">ici du contenu</div>

L'imbrication est-elle indispensable ?

Mon vrai soucis est qu'en fait, lorsque le div apparaît, ça pousse d'autres choses à sa droite ; dans l'idéal, le div devrait apparaître au-dessus de tout, comme avec un gros z-index, mais je n'y arrive pas

Merci pour votre aide

[JefReb]

Il aurait été judicieux de nous donner aussi le css!

https://codepen.io/JefReb/pen/QrjeGq

Code css :

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
* {
	margin: 0;					
	padding: 0;					
	box-sizing: border-box;		
}
body {
	font-family: Verdana, Arial, sans-serif;
	font-size: 100%;
}
.conteneur {
	width: 150px;
	height: 150px;
	position: relative;					
	background-color: blue;
	float:left;
	margin:60px;	
}
.popup {
	width: 150px;
	height: 150px;
	position: absolute;				
	top: 110px;						
	left: 100px;					
	background-color: yellow;
}
.popup {
	visibility:hidden;				
}
.conteneur:hover .popup {
	visibility:visible;				
}

Code html :

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

1
2
3
4
5
<div class="conteneur">
  <div class="popup"></div> 
</div>
 
<div class="conteneur"></div>

[Invité]

Bonjour,

1- Tu peux faire aussi une recherche sur "tooltip", si c'est bien ça que tu veux.

2- la 1ère notion à connaitre est le positionnement : relatif / absolu / fixe.

• CSS - Glossaire des propriétés CSS
• VI-B-3. Type de positionnement | position

IMPORTANT : "un élément est positionné par rapport à son parent le plus proche, lui même positionné".
En clair (cf. exemple ci-dessous) : il faut mettre position:relative; sur le parent

Exemple simple :

Code html :

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

1
2
3
4
<h2 class="tooltip">un titre
 <span>ici du contenu</span>
</h2>
<div> Autre chose....</div>

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.tooltip { 
  position:relative; /* nécessaire pour positionner le tooltip par rapport à ce div */
}
.tooltip > span { 
  position:absolute; /* position :absolu : on sort du flux */
  display:none; /* on masque */
  top:100%; /* s'affichera en dessous */
  left:0;
  background:lightgrey;
  padding:5px;
}
.tooltip:hover > span { 
  display:block; /* on affiche au survol */
}

Bon. Par contre, on constate que le texte qui s'affiche prend les propriétés du titre (font-size,.....)

On peut l'éviter en modifiant le HTML :

Code html :

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

1
2
3
4
5
<div class="tooltip">
  <h2>un titre</h2>
  <span>ici du contenu</span>
</div>
<div> Autre chose....</div>

[JefReb]

Rooooh Jérôme, j'ai donné sans expliquer, j'ai honte!
Tu as le chic pour expliquer aux débutants ... et pourtant j'ai loin d'avoir la grosse tête.
Je pense qu'en creusant il doit comprendre le pourquoi de son problème.

[GillesV]

Bon, j'ai adapté ce que vous m'avez fourni et je suis arrivé à ce que je voulais, y-compris avec des overflow-y parce que j'avais une petite scrollbar à gérer.
Un grand merci à vous tous !

JefReb, je comprends ton propos, cela dit, avec le soucis que je partage d'amener les gens à comprendre par eux-mêmes en leur donnant "que" quelques "indices", j'ai particulièrement apprécié les productions de codes qui m'ont été fournies. Telle n'était pas ma demande initiale je précise. Mais, ça m'a bien aidé.
Ma situation initiale était que je pataugeais depuis trois paires d'heures dans mon css tout pourri en jouant avec display/float et compagnie. Du coup, soit je filais (effectivement) mon code css, et vous, vous le lisez, vous voyez toutes les saletés qu'il y a dedans et vous m'amener à le nettoyer tranquillement, et, oui, je comprends au final ce qu'il fallait faire (et ne pas faire),
ou alors on fait comme ça s'est passé et, au final, là aussi je comprends ce qu'il fallait faire (et ne pas faire).
Donc l'objectif (l'intérêt des forums comme celui-là) est atteint !

Encore merci.