Discussion :

[solorac]

Bonjour la Communauté,

J'ai crée dans mon site des infos bulles qui se dévoilent au passage de la souris sur certains mots.

Je voudrais maintenant que ces infos apparaissent dans un cadre identique (largeur, longueur ajusté en fonction du texte) et surtout que ce cadre apparaisse tjs au même endroit dans ma page web.

Je vous joins mon code pour que vous puissez me dire comment je pourrais faire en fonction de ce que j'ai déjà fais;

je vous remercie pour votre aide.

Css :

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
a.info {
	position: relative;
	text-decoration: none;
	color: #0066FF;
 
	border-bottom: 1px dotted;
}
a.info span {
	display: none;
}
a.info:hover {
	background: none; /* correction d'un bug IE */
	z-index: 500;
}
a.info:hover span {
	display: block;
	position: absolute;
	background:#ef9906;
	padding:2px;
	color: black;
	border: 1px solid black;
}

[binouzzz19]

Salut,

Désolé je n'ai pas forcément les compétences suffisantes pour t'aider en CSS, mais je pensais que si tu veux que ton info-bulle se trouve toujours au même endroit, pourquoi ne pas placer une <div id="infobulle" style="display:none"></div> puis faire un peu de javascript pour l'afficher lorsque tu passes sur tel ou tel champ ?!

Cordialement.

[tsunamichups]

Salut
dans ton code css , ici exactement

Code :

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

1
2
3
4
 
a.info span {
	display: none;
}

tu peut definir une position:absolute;
et definir sa place avec top, left, right et bottom, ce qui aura pour effet de caller ton span en fonction du coin haut gauche de ton navigateur

ce qui en gros te donnera

Code :

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

1
2
3
4
5
6
 
a.info span {
	display: none;
top:550px;
left:250px;
}

A toi de jouer après pour le placer ou tu veux

[solorac]

Ok, j'ai bien compris pour la position de l'info bulle, mais comment afficher tjs la même longueur, alors que la hauteur de la bulle (qui est en fait un rectangle) sera en fonction du texte dans l'info-bulle ?

je vous remercie

[binouzzz19]

Je crois que si tu définis dans le css une longueur et une largeur, les tailles de ton info bulle seront fixes. Apres tu pourras mettre overflow : scroll;

[solorac]

Nickel pour la taille.
Par contre, je n'ai pas très bien compris pour mettre au même endroit les infos-bulles.

Merci pour votre aide.