Discussion :

[Linio]

Je commence à sérieusement désespérer...

J'essaye de programmer un petit tooltip, le plus simple qui soit qui au survol d'un div (carré de 8px de côté) affiche donc un div en mode absolu pas loin du curseur.

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
function showInformations(e){
	if (document.getElementById('overInfos').style)
	{
		document.getElementById('overInfos').style.left = e.clientX +'px';
		document.getElementById('overInfos').style.top = e.clientY +'px';
	} else {
		document.getElementById('overInfos').left = e.clientX;
		document.getElementById('overInfos').top = e.clientY;
	}
 
	document.getElementById('overInfos').innerHTML = "essai de ligne <br /><a href='vue2.php'>essai de lien</a><br />";
	document.getElementById('overInfos').style.visibility = 'visible';
}
 
 
function hideInformations(){
	document.getElementById('overInfos').innerHTML = '';
	document.getElementById('overInfos').style.visibility = 'hidden';
}

Le code de mon Javascript, ensuite j'active l'evenement avec un onmouseover, mais si ça marche de manière impeccable sous IE, l'affichage a tendance à clignoter sous Firefox.

Je me tire les cheveux, et ne trouve pas à quoi c'est du, j'ai essayé plusieurs possibilités, mais toujours le même problème.

Je ne sais pas si quelqu'un a été confronté au problème, si oui, je suis preneur d'infos.

[Sion_Sempai]

Je ne sais pas si ca peut venir de la, mais pour mes "tooltip" J'utilise clientX et clientY pour IE seulement, et pageX et pageY pour les autres navigateurs

j'ai pas de soucis d'affichage pour Firefox, mais un probleme de scrollTop sous IE (voir mon sujet un peu pas loin dans le forum :p )

[Linio]

J'ai essayé mais ça ne change rien.
Firefox reconnait aussi bien l'un que l'autre apparemment...

[scougirou]

Ah !
Mon pote Firefox !!!
Il y a de fortes chances que ces clignottements soient carrement des erreurs de rendu !
J'utilise aussi des tooltip (via une librairie, j'ai rien fait à la main), c'est splendide sous IE mais tout moche (clignotement et position) sous firefox. Idem j'utilise des trucs un peu tangeants pour faire du scroll sur certains éléments : vraiment superbe sous IE et Safari mais avec des affichages doubles ou triple sous certaines versions de firefox et des clignotements... Et si on s'amuse a juste redimentionner la fenêtre pour le forcer à repeindre un coup, tout s'affiche correctement...

Donc selon moi il n'y a pas vraiment de solution, mis à part croiser les doigts pour que le moteur de rendu se soit (beaucoup) amélioré avec la future v3... Dans la mesure ou tu ne fais rien d'illégal il n'est pas normal que le navigateur n'affiche pas ton truc correctement !!!

Sinon tu peux toujours tester différentes méthodes de positionnement et d'affichage de tes bidules, il y en a certainement une qui passera mieux que les autres !

Bon courage.

PS : désolé pour le coup de gueule, moi aussi j'en ai un peu marre...

[Linio]

Ouais mais bon on peut y passer des plombes là dessus...

Merci quand même pour l'info

[Shinuza]

http://demos.mootools.net/Tips

If they can do it, everybody can

Ps: Runs flawlessly under Firefox

[scougirou]

Yep, mais ya besoin de mootools !
Enfin, ça montre quand même que c'est possible !

[Linio]

Oui je crois qu'on s'égare un peu, le but était justement de faire quelque chose qui n'utilise aucune technologie sous une quelconque licence, je pense qu'il y a plus simple pour faire un tooltip que de taper directement dans un framework javascript.

Bon je vais tâcher de faire des tests, je finirais bien par trouver un truc qui fonctionne.

[Auteur]

bonjour,

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
if (document.getElementById('overInfos').style)
{
document.getElementById('overInfos').style.left = e.clientX +'px';
document.getElementById('overInfos').style.top = e.clientY +'px';
} 
else 
{
document.getElementById('overInfos').left = e.clientX+"px";
document.getElementById('overInfos').top = e.clientY+"px";
}

- précise les unités.

- je le trouve un peu curieux ton test Pour savoir si tu es sous IE ou non, utilise document.all (seul IE le reconnait).

- je pense que ton clignotement vient du fait que ton info-bulle s'affiche sous la souris : dans ce cas tu provoques un événement onmouseout sur l'élément donc ta bulle se cache (ta fonction hideInformations() est appelée), mais comme ta souris est toujours sur l'élement un onmouseover est déclenché (ta fonction showInformations() est appelée) ta bulle apparaît donc, mais comme ta bulle apparaît sous la souris tu provoques un événement onmouseout sur l'élément donc ta bulle se cache, etc.... . ton affichage clignote.

Donc, ajoute 5 pixels à top et left pour décaler ta bulle du pointeur

[Shinuza]

Yep, mais ya besoin de mootools !
Enfin, ça montre quand même que c'est possible !

Oui je crois qu'on s'égare un peu, le but était justement de faire quelque chose qui n'utilise aucune technologie sous une quelconque licence, je pense qu'il y a plus simple pour faire un tooltip que de taper directement dans un framework javascript.

Bon je vais tâcher de faire des tests, je finirais bien par trouver un truc qui fonctionne.

C'est bien ce que j'ai dis, "si ils le font, tout le monde peut le faire"

[Linio]

bonjour,

- précise les unités.

- je le trouve un peu curieux ton test Pour savoir si tu es sous IE ou non, utilise document.all (seul IE le reconnait).

- je pense que ton clignotement vient du fait que ton info-bulle s'affiche sous la souris : dans ce cas tu provoques un événement onmouseout sur l'élément donc ta bulle se cache (ta fonction hideInformations() est appelée), mais comme ta souris est toujours sur l'élement un onmouseover est déclenché (ta fonction showInformations() est appelée) ta bulle apparaît donc, mais comme ta bulle apparaît sous la souris tu provoques un événement onmouseout sur l'élément donc ta bulle se cache, etc.... . ton affichage clignote.

Donc, ajoute 5 pixels à top et left pour décaler ta bulle du pointeur

Mon test est curieux parce que c'est le cinquième essai que j'ai picoré d'un site...

Je réessayerais en vérifiant par rapport au navigator et en faisant ta méthode de décalage.

Merci.