toltip fuori schermo

[techno]

salve a tutti.
Tramite jQuery faccio comparire un toltip su dei link.
Ma ce un problema che se il link si trova vicino i bordi della browser il toltip va fuori dal browser.
Come faccio si che se il toltip supera i limiti del browser questo venga visto dentro il browser???

Il code jQuery è il seguente:

$("a").hover(function(e){
$("p#toltip").
css("top",e.pageX +"px").
css("left",e.pageY + "px").
fadeIn("fast");
}, function(){
$("p#toltip").fadeOut("fast");
});

[TrueLies]

Sì può succedere. Strano che un pacchetto come Jquery non gestisca tale eccezione: guarda meglio le documentazioni.

Ad ogni modo, dipende nel codice che posti da
css("left",e.pageY

per quanto è strano - sei sicuro che pageY vada sulla coordinata left? Può essere, non so come si articola in jquery lo script. Ma tradizionalmente Y è una coordinata in ordinata e non in ascissa per cui non sembrerebbe adatta a posizionare in left, che è sulla direttiva delle ascisse.

Ad ogni modo, ammettendo che non hai invertito pageY con pageX e che pageY è la variabile giusta, allora
e.pageY
ti dice dove posizionare a sinistra il tooltip.

A questo punto, prima di assegnare a css() devi verificare se (if)
e.pageY più la width (offsetWidth) del tooltip non eccederebbe la width o offsetWidth del body della pagina.

Se lo fa, cioè se l'evento e.pageY (che si trova diciamo 620)+ offsetWidth del tooltip (diciamo parseFloat(100px) se magari la leggi dallo style, non so) > offsetWidth del body (diciamo 700), puoi piazzarlo a
togli a e.pageY la differenza 620+100-700=20
cioè ad e.pageY-20

[carlomarx]

L'ho fatta al volo e non ho mai usato jQuery in vita mia, quindi è possibile che stia proprio fuori con l'accuso… ma così, per curiosità, prova questo:

$("a").hover(function(e){
	var pXScroll = document.documentElement.scrollLeft || document.body.scrollLeft;
	var pYScroll = document.documentElement.scrollTop || document.body.scrollTop;
	var toolTWidth = document.getElementById("toltip").offsetWidth;
	var toolTHeight = document.getElementById("toltip").offsetHeight;
	thXPos = document.body.offsetWidth - e.pageX - pXScroll > toolTWidth ? e.pageX + pXScroll : document.body.offsetWidth - toolTWidth;
	thYPos = e.pageY - toolTHeight > 6 ? e.pageY + pYScroll - toolTHeight - 7 : mYPos + pYScroll;

	$("p#toltip").
	css("top", thXPos + "px").
	css("left", thYPos + "px").
	fadeIn("fast");
}, function(){
		$("p#toltip").fadeOut("fast");
});

Se funziona dovrai tradurre il codice in jquerese…

[techno]

ok raga ora sto facendo altro ma appena posso lo faccio e lo traduco in jquerese ahahahahaah e lo posto qua grazie.

[cavicchiandrea]

http://api.jquery.com/event.pageY/

[techno]

si cavicchiandrea ma non vedo il mio problema in quello che mi hai segnalato.

[TrueLies]

uhm guarda che il link che ti ha postato andrea sembra confermare la mia ipotesi: pageY è sulle ordinate non sulle ascisse, ma sembrerebbe che tu lo stia assegnando alla posizione left, che è sulle ascisse.

Questo a prescindere dal problema specifico: verifica meglio, in modo che evitiamo di lavorare su un doppio problema: quello da te presentato, e un altro dovuto ad una svista.

Non so come funziona jquery per questo applicativo di tooltip ma come ti dicevo mi stupirebbe che non gestisca questa ovvia eccezione - se hai invertito per errore pageY con pageX può darsi che, correggendo quello, anche jquery riesca a gestire la eccezione.
Verifica un po', poi facci sapere.

Cioè, mi sto e ti sto chiedendo: tu hai
css("top",e.pageX +"px")
css("left",e.pageY + "px")

sei sicuro non debba essere:
css("top",e.pageY +"px")
css("left",e.pageX + "px")

?

ps quel concatenamento css(...).css(...) non so se è corretto
Cioè non vorrei fosse, pure:
$("p#toltip").css("top",e.pageY +"px")
$("p#toltip").css("left",e.pageX + "px")
$("p#toltip").fadeIn("fast");
non uso jquery per cui sono verifiche che devi fare te, ma quella di pageY e pageX, davvero, dovresti farla.