Problema con tooltip. Perché fa così?

**giulioferri** · 20-09-2004, 11:00

Dopo una ricerca su internet (compreso questo forum) ho trovato svariati modi per ottenere (teoricamente ) dei tootip carini al passaggio del mouse.

Inserito nel mio sito mi fa una cosa stranissima. Senza dilungarmi troppo conviene guardarlo direttamente... (guarda esempio)

Praticamente se passate il mouse sui titoli colorati presenti nel corpo della pagina viene fuori un tootip molto carino... ma provate a far scrollare la pagina (anche di poco) verso il basso e vedrete che il tooltip NON SEGUE lo scroll. Perché?

Su molti siti ho trovato tooltip analoghi che però funzionano bene... Non se che pesci prendere.

Di seguito riporto ciò che ho fatto praticamente:

All'interno del tag <body> ho inserito

codice:

<div id="cmnt" style="position:absolute; visibility:hidden; width:150px;  z-index:5">Qui andrà a finire il toolTip</div>

All'interno dei tag <head> </head> ho inserito

codice:

<script language="javascript">
var x=null, y=null; // id:cmnt

function EventXY(event) {
	if(document.layers) {
		x=event.pageX;
		y=event.pageY;
	}
	else if(document.all) {
		event=window.event;
		x=event.clientX;
		y=event.clientY;
	}
	else if((document.getElementById)&&(!document.all)) {
		x=event.clientX;
		y=event.clientY;
	}
	else {
		x=event.clientX;
		y=event.clientY;
	};
};

if(document.layers) {
	document.captureEvents(Event.MOUSEMOVE);
};

document.onmousemove=EventXY;

function getElementByBrowser(table) {
if(document.layers) {
	return document.layers["cmnt"].document.write(table);
}
else if(document.all) {
	return document.all["cmnt"].innerHTML=table;
}
else if((document.getElementById)&&(!document.all)) {
	return document.getElementById("cmnt").innerHTML=table;
}
else {
	return document.getElementById("cmnt").innerHTML=table;
};
};

function muovi() {
var dis=8, disS=40;
if(document.layers) {
	document.layers["cmnt"].top=y+dis;
	document.layers["cmnt"].left=x-disS;
	document.layers["cmnt"].visibility="show";
}
else if(document.all) {
	document.all["cmnt"].style.top=y+dis;
	document.all["cmnt"].style.left=x-disS;
	document.all["cmnt"].style.visibility="visible";
}
else if((document.getElementById)&&(!document.all)) {
	document.getElementById("cmnt").style.top=y+dis;
	document.getElementById("cmnt").style.left=x-disS;
	document.getElementById("cmnt").style.visibility="visible";
}
else {
	document.getElementById("cmnt").style.top=y+dis;
	document.getElementById("cmnt").style.left=x-disS;
	document.getElementById("cmnt").style.visibility="visible";
};
};

function apri(testo,stile) {
var table="";
table="<table class="+stile+">";
table+=("<tr><td align=\"center\"><font size=1>"+testo+"</font></td></tr>");
table+=("</table>");
getElementByBrowser(table);

if(document.layers) document.layers["cmnt"].document.close();
timer=window.setInterval("muovi();",2);
};

function chiudi() {
window.clearInterval(timer);
if(document.layers) {
	document.layers["cmnt"].top=0;
	document.layers["cmnt"].left=0;
	document.layers["cmnt"].visibility="hide";
}
else if(document.all) {
	document.all["cmnt"].style.top=0;
	document.all["cmnt"].style.left=0;
	document.all["cmnt"].style.visibility="hidden";
}
else if((document.getElementById)&&(!document.all)) {
	document.getElementById("cmnt").style.top=0;
	document.getElementById("cmnt").style.left=0;
	document.getElementById("cmnt").style.visibility="hidden";
}
else {
	document.getElementById("cmnt").style.top=0;
	document.getElementById("cmnt").style.left=0;
	document.getElementById("cmnt").style.visibility="hidden";
};
};

</script>

E poi nel punto dove voglio far comparire l'effetto ho inserito.

codice:

<p class="tdBassaNormale5" onmouseover="apri('Raccolta di articoli su viaggi più o meno lontani','tdBassaNormale5');" onmouseout="chiudi();">Appunti di viaggio </p>

Grazie 1000!

**Xinod** · 20-09-2004, 21:22

ciao Giulio
farei così, via tutto questo

codice:

function EventXY(event) {
	if(document.layers) {
		x=event.pageX;
		y=event.pageY;
	}
	else if(document.all) {
		event=window.event;
		x=event.clientX;
		y=event.clientY;
	}
	else if((document.getElementById)&&(!document.all)) {
		x=event.clientX;
		y=event.clientY;
	}
	else {
		x=event.clientX;
		y=event.clientY;
	};
};

da sostituire con

codice:

function EventXY(e) {
	if(!e) e=window.event;
	var vDoc=(document.documentElement && document.documentElement.scrollTop)? document.documentElement : document.body;
	x=(e.pageX)?e.pageX:e.clientX+vDoc.scrollLeft;
	y=(e.pageY)?e.pageY:e.clientY+vDoc.scrollTop;
}

cmq testando con mozilla e affini noteresti che il box non si schioda da coordinate 0,0
perchè i browser moderni (e a IE con doctype non dispiace) vogliono l' unità di misura

codice:

...
else if((document.getElementById)&&(!document.all)) {
	document.getElementById("cmnt").style.top=y+dis+'px';
	document.getElementById("cmnt").style.left=x-disS+'px';
	document.getElementById("cmnt").style.visibility="visible";
}
else {
	document.getElementById("cmnt").style.top=y+dis+'px';
	document.getElementById("cmnt").style.left=x-disS+'px';
	document.getElementById("cmnt").style.visibility="visible";
};
...

tra l' altro con i 2 rami identici è superfluo distinguere

**giulioferri** · 20-09-2004, 22:42

Ora funziona alla perfezione! Grazie 1000!!!

Discussione: Problema con tooltip. Perché fa così?

Strumenti discussione

Ricerca discussione

Visualizza

Problema con tooltip. Perché fa così?

perfetto!!!

Permessi di invio