this.vtip = function() { this.xOffset = 10; // x distance from mouse this.yOffset = -100; // y distance from mouse $(".vtip").unbind().hover( function(e) { this.t = this.title; this.title = ''; this.top = (e.pageY + yOffset); this.left = (e.pageX + xOffset); $('p#vtip #vtipArrow').attr("src", 'img/vtip_arrow.png'); $('p#vtip').css("top", this.top+"px").css("left", this.left+"px").fadeIn("slow"); }, function() { this.title = this.t; $("p#vtip").fadeOut("slow").remove(); } ).mousemove( function(e) { this.top = (e.pageY + yOffset); this.left = (e.pageX + xOffset); $("p#vtip").css("top", this.top+"px").css("left", this.left+"px").css("width", 200+"px"); } ); }; jQuery(document).ready(function($){vtip();})
z następującym css'em:
p#vtip { display: none; position: absolute; padding: 10px; font-size: 0.8em; text-align: left; background-image: url(../img/transblack); border: 1px solid #FFFFFF; -moz-border-radius: 5px; -webkit-border-radius: 5px; z-index: 9999 }
Skrypt ten odpowiada za wyświetlanie dymka po najechaniu na element z ustawioną klasą vtip z treścią umieszczoną w atrybucie title. Mój problem polega na tym, że skrypt nie uwzględnia końca okna przeglądarki i po wyświetleniu zbyt wysokiego dymka okno przeglądarki dostosowuje się do jego rozmiarów (niestety nie można odczytać treści dymka ponieważ przewinięcie strony wymagałoby przewinięcia strony i zejście kursora z elementu, który aktywuje skrypt, a co za tym idzie zniknięcie dymka). W moim wypadku wyświetlanie dymka od dolnego lewego rogu rozwiązywałoby sprawę niestety próbowałem zmienić to na wiele sposobów i każdy zawiódł. Ustawienie bottom zamiast top w css() i nadaniu konkretnej wartości odległości od dolnej krawędzi ekranu powoduje tylko dziwne zachowanie skryptu i dynamiczną zmianę rozmiaru dymka (treść pozostaje bez zmian). Bardzo proszę o pomoc w przebudowaniu tego skryptu by dymek był wyświetlany od względem myszki od dolnego lewego rogu.