Discussion :

[Grey]

Bonjour, j'ai un petit soucis d'overlap dans un formulaire


J'ai créé un petit script js pour des tooltips basiques, tout marche bien (détection des dimensions de la fenêtre pour le placement, etc)
et il apparait nickel sur tous les types de champs, exception faite des SELECT

Lorsqu'il y a un select, le tooltip (un simple div positionné en js + css) s'affiche en dessous du select quoi qu'il arrive.


J'ai essayé d'insérer des z-index, mais ça ne change rien...


Pour info, c'est pour du IE exclusivement (faute à la boite ou je suis où seul IE est installé)


J'avais déjà eu ce probleme avec des tooltips trouvé sur le net (en plus du fait que certains ne géraient pas la fenêtre ou était relativement lourd)


Je voulais savoir s'il existait quelque chose de particulier avec le SELECT, et s'il existait une solution pour résoudre ce probleme, merci

[Grey]

voila pour info le résultat, sur une fenêtre réduite (obligeant le tooltip à apparaitre du mauvais côté)



il passe au dessus de tout, sauf des SELECT box...

[franculo_caoulene]

Salut,

C'est le comportement normal du select, il sera toujours au dessus des autres éléments. Le seul moyen que je connaisse est de cacher le select avec un display.

[Grey]

c dommage, ça ne m'arrange pas beaucoup, certains utilisateurs ici ayant des écrans de taille réduite, le tooltip fini par apparaitre sur les selects

:'(

[Nicolas.Cogi]

c'est surtout un probleme avec le select dans IE, tu n'aurais pas le probleme dans firefox.
Il existe différentes techniques pour lutter contre le fléau du select

Celle que je te recommanderais ici est d'utiliser un iframe pour ton tooltip, qui s'affichera bien par dessus le select. Aucun autre element ne passe par dessus à ma connaissance.

Tu n'es pas obligé de péter une requete HTTP pour afficher du contenu dans l'iframe, le body peut etre rempli par scripting en récupérant le document de l'iframe et en remplissant le contenu avec une copie de innerHTML.

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
 
function GetFrameDoc(ID) {
	var doc = null;
	try {
		if (document.frames)
		{
			if (frm = document.frames[ID])
			{
				if (frm.document)
					doc = frm.document;
			}
		}
		if (doc == null)
		{
		if (obj = document.getElementById(ID))
		{
				if (obj.contentDocument)
					return obj.contentDocument;
				else if (obj.contentWindow)
					return obj.contentWindow.document;
				else if (obj.document)
					return obj.document;
			}
		}
		return doc;
	}
	catch (e)
	{
		// do nothing
	}
}

Apres doc.body.innerHTML = 'Mon tips';
L'iframe se manipule et se positionne comme le div.